前言概要：使用VUE，需要掌握VUE一些的内置指令，根实例的常用属性、方法(事件)，根实例上面常用的属性包括常用的内置指令包括 v-model、v-for、自定义指令等
- created() // 生命周期方法
- data: // 数据池
- methods: // 方法池
- filter: // 过滤池
- compute: // 计算属性池
- watch: // 观察者池
- directives: // 自定义指令池
本文会使用以下例子来阐述根实例的每个方法是作用以及使用场景，希望能用直观的方式来描述常用根实例的含义
以下就是根实例的大致结构
let vm = new Vue({ // 创建一个vm就是创建一个根实例
// el:是获取浏览器里面的DOM元素，对其进行操作
el: "#app",
filters: {
// 过滤池，通过过滤池实现对数据包装、过滤等操作
},
directives: {
// 自定义指令池：通过自定义指令池获取绑定的标签，实现对标签操作
},
// 生命周期函数，常用的是created,生命函数包括[beforeCreate、created]、[beforeMount、mounted]、[beforeUpdate、updated]、[beforeDestroy、destroyed]、[activated、deactivated]
created(){
// 获取数据...
},
computed: {
// 计算属性池，通过计算属性池对根实例上的数据进行getter、setter操作(在计算属性池内的数据都自带缓存功能、如果数据没有变化，则不会重复计算，提高性能)
},
watch: {
// 观察者池：实时检测根实例上的某个数据。数据变化是则调用监听函数，把修改前的旧值和修改后的新值作为函数传入
},
data: {
// 数据池
},
methods: {
// 方法池
}
})
下面就用这个例子来介绍根实例里面常用的属性和方法
内置指令v-model 用于数据模型双向绑定
1、创建一个并且div
为id
的标签、里面包含一个app
标签和一个六列的表格input
2、创建一个
script
脚本，创建一个
vm
根实例，在根实例上面写一个
data
属性，
data
里面的对象，都是提供给页面标签调用数据使用。在
data
里面写上
title
并赋值一个原始数据
哈哈购物车
(此数据可以利用网络请求获取，实现动态展示) 3、通过在标签上
v-model="title"
即可把
input
标签的值和
data
里面的
title
双向绑定,此时修改
input
文本框内的值也会修改
data
里面的
title
属性，在表格标签内通过
{{title}}
的方式，把
data
里面的
title
的显示在
表头，实现展示。
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
let vm = new Vue({
el:'#app',
// 数据池
data: {
title:'购物车'
},
})
v-for 数据循环绑定
在上面的
vm
根实例
data
里面，添加一个
books
属性，赋值一个数组作为原始数据(此数据可以利用网络请求获取，实现动态展示)
选择需要循环的
tr
标签，在需要循环
tr
的标签上加上
v-for="book in books"
内置指令，
books
是
data
数据池里面的
books
数组，
book
是通过循环
books
循环出来的每一项，为了代码规范命名为
book
，其实叫a、b、c都可以，在表格的每一列，通过
{{book.id}}
、
{{book.name}}
、
{{book.price}}
、
{{book.price*book.count)}}
获取每一项循环出来的值
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
v-for="book in books" v-color="book.isSelected">
选择 type="checkbox" v-model="book.isSelected">
{{book.id}}
{{book.name}}
{{book.price}}
{{book.count}}
{{book.price*book.count}}
let vm = new Vue({
el:'#app',
// 数据池
data: {
books: [
{id: "1",name: "vue",price: "23.86",count: 3,isSelected: true},
{id: "2",name: "react",price: "32.85",count: 2,isSelected: false}
],
},
})
filter属性用于过滤
有时候会出现计算的数值后有很多位小数，如果需要计算小数点后几位,则需要使用
tofix
方法，但是如果出现很多地方都需要处理，就相对比较麻烦，这里提供一个filter过滤池，可以通过在数值后面 用
"|"
这个管道符统一处理:如计算小计价格
{{book.price*book.count | toFix(2)}}
在根实例上写一个filters(属性名是固定的)的属性，属性里面写的是过滤的方法，通过
"|"
调用
filters
里面的过滤方法，实现统一处理
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
v-for="book in books" v-color="book.isSelected">
选择 type="checkbox" v-model="book.isSelected">
{{book.id}}
{{book.name}}
{{book.price}}
{{book.count}}
{{book.price*book.count | toFix(2)}}
let vm = new Vue({
el:'#app',
filters: { // 过滤池，通过过滤池实现对数据包装、过滤等操作
toFix(input, paramas){ // 过滤方法
return input.toFixed(paramas)
}
},
// 数据池
data: {
books: [
{id: "1",name: "vue",price: "23.86",count: 3,isSelected: true},
{id: "2",name: "react",price: "32.85",count: 2,isSelected: false}
],
},
})
computed计算属性
有时候我们会根据其他值来计算总价，如果使用直接计算展示总价这种方式，根据
vue
的机制，修改与价格无关的值，如修改标题，此时又要数据的变化，
vue
依然会重新更新界面的数据，这个时候总价也会跟着计算一次，白白的消耗性能，此时我们可以通过计算属性的
get()
来获取总价
{{total}}
，不仅能统一管理，还自带缓存，优化性能。
同样在全选的功能上，我们勾选了全选单选框，让列表每项都选中，同时每项取消勾选后，全选按钮会自动取消勾选，这样的联动效果，可以利用计算属性的
get()
获取
books
里面每一项是否被勾选来确定是否全选、通过
set(val)
方法把
books
里面的值全部设置为勾选或取消勾选，优化代码量。
在根实例上面使用
computed
属性，在
computed
属性里面声明一个自定义的属性
checkAll
,此属性包含两个函数，一个是
get()
,一个是
set(val)
,自定义属性同样挂载在根实例上面，通过
{{total}}
即可从
total
属性上通过
get()
函数获取的返回值。
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
v-for="book in books" v-color="book.isSelected">
选择 type="checkbox" v-model="book.isSelected">
{{book.id}}
{{book.name}}
{{book.price}}
{{book.count}}
{{book.price*book.count}}
{{total}} @click="buy(all)">购买
let vm = new Vue({
el:'#app',
filters: { // 过滤池，通过过滤池实现对数据包装、过滤等操作
toFix(input, paramas){ // 过滤方法
return input.toFixed(paramas)
}
},
// 数据池
data: {
books: [
{id: "1",name: "vue",price: "23.86",count: 3,isSelected: true},
{id: "2",name: "react",price: "32.85",count: 2,isSelected: false}
],
},
// 计算属性池，通过计算属性池对根实例上的数据进行getter、setter操作(在计算属性池内的数据都自带缓存功能、如果数据没有变化，则不会重复计算，提高性能)
computed: {
checkAll: {
get(){
return this.books.every(item => {
return item.isSelected
})
},
set(val){
this.books.forEach(item => {
item.isSelected = val;
})
}
},
total(){
return this.books.reduce((pre, next) => {
if (next.isSelected) {
return pre + next.price * next.count;
} else {
return pre;
}
}, 0)
}
},
})
watch 监听池
属性监听顾名思义就是监听根实例里面数据的某一个属性，当属性的值发生变化的时候，会调用里面的方法，把新值和旧值传给该方法。
使用根实例使用
watch
属性，监听方法的名字跟属性名字一直，方法触发执行里面的逻辑
此案例运用了监听属性，对总价进行了简单的字符串拼接
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
v-for="book in books" v-color="book.isSelected">
选择 type="checkbox" v-model="book.isSelected">
{{book.id}}
{{book.name}}
{{book.price}}
type="number" v-model.number="book.count">
{{book.price*book.count | toFix(2)}}
{{all}} @click="buy(all)">购买
let vm = new Vue({
el:'#app',
// 过滤池，通过过滤池实现对数据包装、过滤等操作
filters: {
toFix(input, paramas){
return input.toFixed(paramas)
}
},
// 计算属性池，通过计算属性池对根实例上的数据进行getter、setter操作(在计算属性池内的数据都自带缓存功能、如果数据没有变化，则不会重复计算，提高性能)
computed: {
checkAll: {
get(){
return this.books.every(item => {
return item.isSelected
})
},
set(val){
this.books.forEach(item => {
item.isSelected = val;
})
}
},
total(){
return this.books.reduce((pre, next) => {
if (next.isSelected) {
return pre + next.price * next.count;
} else {
return pre;
}
}, 0)
}
},
// 观察者池：实时检测根实例上的某个数据。数据变化是则调用监听函数，把修改前的旧值和修改后的新值作为函数传入
watch: {
total(newValue, oldValue){
return this.all = '总价$:' + newValue;
}
},
// 数据池
data: {
books: [
{id: "1",name: "vue",price: "23.86",count: 3,isSelected: true},
{id: "2",name: "react",price: "32.85",count: 2,isSelected: false}
],
},
})
自定义指令 directives
有时候我们需要给根据数据的变化对界面上的元素进行操作，
在标签上面自定义一个属性，名字必须
v-
开头，在根实例上面标明
directives
属性，
directives
里面标明的方法跟自定义属性
v-
后面的内容一致，作为绑定的标志，方法里面自动传入一个以上参数，第一个是
el
，代表所绑定的标签元素，如果有参数，就会依次传入
此案例运用自定义标签，让标签根据是否选择，添加背景颜色的功能
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
v-for="book in books" v-color="book.isSelected">
选择 type="checkbox" v-model="book.isSelected">
{{book.id}}
{{book.name}}
{{book.price}}
type="number" v-model.number="book.count">
{{book.price*book.count | toFix(2)}}
{{all}} @click="buy(all)">购买
let vm = new Vue({
el:'#app',
// 过滤池，通过过滤池实现对数据包装、过滤等操作
filters: {
toFix(input, paramas){
return input.toFixed(paramas)
}
},
// 自定义指令池：通过自定义指令池获取绑定的标签，实现对标签操作
directives: {
color(el, bindings){
if (bindings.value === true) {
el.style.background = "red";
} else {
el.style.background = "";
}
}
},
// 计算属性池，通过计算属性池对根实例上的数据进行getter、setter操作(在计算属性池内的数据都自带缓存功能、如果数据没有变化，则不会重复计算，提高性能)
computed: {
checkAll: {
get(){
return this.books.every(item => {
return item.isSelected
})
},
set(val){
this.books.forEach(item => {
item.isSelected = val;
})
}
},
total(){
return this.books.reduce((pre, next) => {
if (next.isSelected) {
return pre + next.price * next.count;
} else {
return pre;
}
}, 0)
}
},
// 观察者池：实时检测根实例上的某个数据。数据变化是则调用监听函数，把修改前的旧值和修改后的新值作为函数传入
watch: {
total(newValue, oldValue){
return this.all = '总价$:' + newValue;
}
},
// 数据池
data: {
books: [
{id: "1",name: "vue",price: "23.86",count: 3,isSelected: true},
{id: "2",name: "react",price: "32.85",count: 2,isSelected: false}
],
},
})
methods方法池
用于标签元素的事件绑定，在标签上面用@+事件名称表示事件，再给事件名称赋值一个事件函数fn，如点击事件
@click=“fn”
,键盘按下事件
@keydown=“fn”
,键盘抬起事件
@clickup=“fn”
。
在根实例上面用
methods
里面的属性用方法表示，方法名是给事件赋值的事件函数一一对应
例如给“购买”按钮添加添加事件，弹出购买金额提示框
id="app">
修改购物车标题： type="text" v-model="title">
>
{{title}}
全选 type="checkbox" v-model="checkAll">
序号
名字
价格
数量
小计
v-for="book in books" v-color="book.isSelected">
选择 type="checkbox" v-model="book.isSelected">
{{book.id}}
{{book.name}}
{{book.price}}
type="number" v-model.number="book.count">
{{book.price*book.count | toFix(2)}}
{{all | toFix(2)}} @click="buy(all)">购买
// 创建一个vm就是创建一个根实例
let vm = new Vue({
// el:是获取浏览器里面的DOM元素，对其进行操作
el: "#app",
// 过滤池，通过过滤池实现对数据包装、过滤等操作
filters: {
toFix(input, paramas){
return input.toFixed(paramas)
}
},
// 自定义指令池：通过自定义指令池获取绑定的标签，实现对标签操作
directives: {
color(el, bindings){
if (bindings.value === true) {
el.style.background = "red";
} else {
el.style.background = "";
}
}
},
// 生命周期函数，常用的是created,生命函数包括[beforeCreate、created]、[beforeMount、mounted]、[beforeUpdate、updated]、[beforeDestroy、destroyed]、[activated、deactivated]
created(){
// 获取数据...
this.all = this.total;
},
// 计算属性池，通过计算属性池对根实例上的数据进行getter、setter操作(在计算属性池内的数据都自带缓存功能、如果数据没有变化，则不会重复计算，提高性能)
computed: {
checkAll: {
get(){
return this.books.every(item => {
return item.isSelected
})
},
set(val){
this.books.forEach(item => {
item.isSelected = val;
})
}
},
total(){
return this.books.reduce((pre, next) => {
if (next.isSelected) {
return pre + next.price * next.count;
} else {
return pre;
}
}, 0)
}
},
// 观察者池：实时检测根实例上的某个数据。数据变化是则调用监听函数，把修改前的旧值和修改后的新值作为函数传入
watch: {
total(newValue, oldValue){
return this.all = newValue;
}
},
// 数据池
data: {
books: [
{
id: "1",
name: "vue",
price: "23.86",
count: 3,
isSelected: true
}, {
id: "2",
name: "react",
price: "32.85",
count: 2,
isSelected: false
}
],
all: 0,
title:'哈哈购物车'
},
// 方法池
methods: {
buy(val){
alert(`您共需要支付${val}元`);
}
}
})
通过这个小小的示例，介绍了一下vue常用的内置指令与根实例里面的方法和属性，vue的入门应用基本告一段落。下一篇会结合前端路由，模仿一个移动端的小应用，敬请关注。
![vue template 图片_VUE 的使用，学会这些就足够了！| 原力计划{{message}}{{isshow}}ok{{message}}{{name}} 父组件:{{parentmsg}}||{{message}}首页{{msg}}[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)