上一节我们了解了vue学习之路(一)环境的搭建,今天我们带大家了解vue常用知识点。
引入vue
之后所有示例都默认引入vue.js,推荐去https://www.bootcdn.cn/查找引入vue.
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
html
<div id="app">
<span>message: {{ message }}</span>
</div>
javascript
var app = new Vue({
el : '#app',
data : {
message : 'hello vue'
}
})
数据绑定
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>
一次性绑定
<span v-once>一次性赋值,当数据改变时这里不会改变{{ message }}</span>
原始的html
<div v-html="htmlData"></div>
绑定属性
<button v-bind:disabled="status">按钮</button>
此时按钮的disabled属性就被status数据控制,另外还有简易写法(:属性名):
<button :disabled="status">按钮</button>
javascript表达式
<span>{{ status == 'online' ? '在线' : '离线' }}</span>
只能写单个表达式,流程控制和语句等不能执行!
绑定事件
<div id="app">
<div v-on:click="sayHello()">点我啊</div>
</div>
var app = new Vue({
el:'#app',
data:{},
method:{
sayHello:function(){
alert('hello vue');
}
}
})
同样v-on也有缩写
<div @click="sayHello()">点我啊</div>
侦听器
侦听器是一个监听数据变化的vue属性,举例如下
<div id="app">{{ message }}</div>
var app = new Vue({
el:'#app',
data:{
message:"this is a watch word"
},
watch: {
message:function(newVal, oldVal){
console.log('message old value is :'+oldVal);
console.log('message now value is :'+newVal);
}
}
});
当我们在控制台手动变更message的值的时候,watch会监听到message的变更,并且执行对应回调函数,参数为变更后的值,和变更前的值
计算属性
虽然在双大括号中可以对数据运用一些表达式,但是在模板中放入太多的逻辑会让模板过重且难以维护,计算属性就是解决这一问题的
var app = new Vue({
el:'#app',
data:{
message:"hello vue"
},
computed: {
message1 :function(){
return 'woann ' + this.message
}
}
});
message1的结果就是由计算属性返回的,并且计算属性对应函数中包含的属性只要发生变化,那么计算属性也发生变化
条件渲染、列表渲染、class与style绑定
条件渲染
显示
隐藏
列表渲染
var app = new Vue({
el:'#app',
data:{
list: [
{name:"woann",age:25,sex:"男"},
{name:"john",age:29,sex:"男"},
{name:"jack ma",age:50,sex:"男"},
{name:"dongmingzhu",age:50,sex:"女"},
]
}
});
徐伟轩博客-爱写歌的程序员思考和科普的日常自媒体
https://letus.top/archives/38.html(转载时需注明本文出处及文章链接)
如需转载或刊登,请联系我们获得授权。
如何修改iframe里的css样式及跨域问题讲解
4,340 阅读 - 09/14网页HTML如何实现页面自适应,适配手机屏幕
4,271 阅读 - 10/24分享带缩略图的网页链接到微信朋友圈[方法]
3,981 阅读 - 10/23网页里点击A标签没有反应怎么办?
2,489 阅读 - 04/15一行代码将你网站封装成微信小程序?
2,063 阅读 - 05/12关于微信里已停止访问该网页的解决办法
1,776 阅读 - 09/24SablogX博客安装出现反复检验数据库的错误解决方案
1,415 阅读 - 03/03写博客有个卵用?
1,257 阅读 - 10/01