注:内容仅供参考,如有不同或错误可随时联系
安装
安装node.js环境
IDE:vscode:安装插件Vetur、open in browser、Live Server,创建Vue项目
webstorm:直接创建Vue项目
把vue.js看做一个函数库,导入程序(每个Vue项目都要导入)
插值表达式
把data里面的数据用 {{}} 传输到页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
指令
v-bind:改变属性
元素的属性值可动态改变,不能用{{}}绑定
标准写法: <元素 v-bind:属性名=“js表达式”>
v-bind可省略,但是:不能省略
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<div>
<button :title = "mytitle">按钮</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
mytitle : "修改title"
}
});
</script>
</body>
v-show:控制元素的隐藏显示
根据程序中的变量值控制一个元素显示隐藏
语法: <元素 v-show="js条件">
原理: new Vue()扫描到v-show时,自动执行js条件,如果条件为true,则该元素原样显示。否则如果js条件执行结果为false,则new Vue()自动为当前元素加display:none,隐藏。
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<div>
<button @click = "show">显示</button>
<button @click = "hide">隐藏</button>
<span v-show = "flag">显示隐藏标签</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
flag : true
},
methods:{
show:function () {
this.flag = true;
},
hide:function () {
this.flag = false;
}
}
});
</script>
</body>
v-if(v-else):控制元素的隐藏显示
上例中v-show可直接换成v-if,但是原理不同:v-if在扫描时,如果条件为true,则保留该元素。否则如果条件为false,则删除该元素!
对比: v-show vs v-if
–v-show 采用display:none方式隐藏元素,不改变DOM树,效率高!(频繁修改可用)
–v-if 采用添加删除元素方式控制元素显示隐藏,可能频繁修改DOM树,效率低!
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<div>
<button @click = "show">已注册</button>
<button @click = "hide">未注册</button>
<span v-if = "flag">登录</span>
<span v-else>注册</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
flag : true
},
methods:{
show:function () {
this.flag = true;
},
hide:function () {
this.flag = false;
}
}
});
</script>
</body>
事件
事件指令v-on
标准写法:元素: <元素 v-on:事件名=“处理函数()”>
简写:<元素 @事件名=“处理函数()”>,如不需要传参可省略()
可参照上面 v-if 的 @click
双向绑定
既能将data中的变量值自动同步到HTML页面中,又能将页面上的修改自动同步回data变量中。
(data <===> div#app)
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用 value 和 input 事件;
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
<p>{{ message + "哈哈哈" }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</body>
checkbox 和 radio 使用 checked 和 change 事件;
例:多个复选框,绑定到同一个数组
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkname">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkname">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkname">
<label for="mike">Mike</label>
<p>{{ checkname }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
checkname : []
}
})
</script>
</body>
select 字段使用 value 和 change 作为事件
例:选择框单选时
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<p>您选择的是:{{ selected }}</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
注:如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。
在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
修饰符
.lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步.
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<input v-model="message">
<p>Message is : {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '默认值'
}
})
</script>
</body>
.number
•如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符.
•这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。
•如果这个值无法被 parseFloat() 解析,则会返回原始的值。
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<input v-model.number = "num" type="number">
<p>{{ num }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 0
}
})
</script>
</body>
.trim
•如果要自动过滤用户输入的首位空白字符,可以给 v-model 添加 trim 修饰符.
<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
<input v-model.trim = "message">
<p>Message is : {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '',
}
})
</script>
</body>
计算属性和侦听属性 (入门使用频率较少)
计算属性
有些值,总是可以根据其他属性值的变化动态计算获得,每次绑定属性时,都需要根据其他属性的值动态计算获得该属性的属性值,这样的值,就没必要在程序中再保存一份。主要用于同步。
计算属性的值会被缓存,只有当它的依赖数据发生变化时才会重新计算。这有助于提高性能。
语法:计算属性,虽然本质是一个函数,但是在HTML中绑定语法中使用时,不要加 ()
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter。
method和watch异同:可以将同一函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要被依赖数据还没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。
<body>
<div id="app">
<div> {{total1()}} </div>
<div> {{total2}} </div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 10,
price: 10,
},
methods: {
total1: function () {
return this.num * this.price
}
},
computed: {
total2: function () {
return this.num * this.price
}
}
})
</script>
</body>
侦听属性
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
watch是一个对象,可以看作对象使用,是对象就有键,有值。
键:是需要监听的目标,可以是data中的某个变量。
值:a) 值可以是函数:就是当你监听的变量发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是更新后的值。 b) 值可以是函数名:不过函数名要使用单引号来标注。 c)值可以是选项中的对象:选项包括有三个。第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep:其值是true或false;确认是否深入监听。(一般用来监听一个对象里面的值)。第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
<body>
<div id="app">
<table>
<tr>
<td>
<input id="" v-model="price" name="" type="number">
</td>
<td>
<input id="" v-model="num" name="" type="number">
</td>
</tr>
</table>
<p>{{price * num}}</p>
<p>{{tot}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
price: 99,
num: 2,
tot: 0
},
watch: {
price: function (newVal, oldVal) {
this.tot = newVal * this.num;
console.log("price newer" + newVal + "---older" + oldVal);
},
num: function (newVal) {
this.tot = this.price * newVal;
console.log("num" + newVal);
}
}
});
</script>
</body>
对比与总结
watch 与 computed
对比:当有一些数据需要随着其它数据变动而变动时,很容易滥用 watch。通常更好的做法是使用计算属性而不是命令式的 watch 回调。
methods 与 computed
(1)如果这次使用时,更关心函数的执行结果数据时,首选计算属性。
(2)如果这次使用时,更关心函数执行操作的过程,结果数据无所谓,甚至函数没有返回值,则首选methods中的方法。
列表渲染
反复生成多个相同结构的HTML元素: v-for
常用语法:<要反复生成的元素 v-for="(value, index) of 数组">
主要用于显示列表渲染:例如显示商品列表,书籍列表等
用 v-for 把一个数组对应为一组元素
基础
过渡:数组里面有对象
常用 v-for="(key, index) of items"
在 v-for 里使用对象
也可以用 v-for 来遍历一个对象的 property。
在 v-for 里使用对象(加上 名称)也可以提供第二个的参数:名称 (也就是键名)。<常用>
在 v-for 里使用对象(加上名称,再加上索引)还可以用第三个参数作为索引。