vue学习之路(二)了解vue常用知识点
10月05
上一节我们了解了vue学习之路(一)环境的搭建，今天我们带大家了解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的变更，并且执行对应回调函数，参数为变更后的值，和变更前的值
计算属性
虽然在双大括号中可以对数据运用一些表达式，但是在模板中放入太多的逻辑会让模板过重且难以维护，计算属性就是解决这一问题的
{{ message }}
{{ message1 }}
{{ message1 }}
var app = new Vue({
el:'#app',
data:{
message:"hello vue"
},
computed: {
message1 :function(){
return 'woann ' + this.message
}
}});
message1的结果就是由计算属性返回的，并且计算属性对应函数中包含的属性只要发生变化，那么计算属性也发生变化
条件渲染、列表渲染、class与style绑定
条件渲染
你才{{ age }}岁，你还年轻
今年竟然 {{ age }}岁了
你都 {{ age }}岁了，大叔
显示
隐藏
列表渲染
- 序号：{{ index }}，姓名：{{ val.name }},性别：{{ val.sex }},年龄：{{ val.age }}，定位：{{ val.age > 30 ? '大龄' : '小年轻' }}
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/mblog/archives/38.html（转载时需注明本文出处及文章链接）
如无特别注明，本站内容为原创。
如需转载或刊登，请联系我们获得授权。
