本文介绍了Vue的指令系统，包括数据绑定、属性绑定、条件渲染、列表渲染、事件处理和表单修饰符。重点讲解了v-model、v-bind、v-if/v-show、v-for等核心指令的用法及优缺点，帮助理解MVVM模式在Vue中的应用。
Vue指令系统
vue 指令是什么？
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
vue常用指令：
1.数据绑定
非表单元素_单向数据绑定_：div span ul li h1-h6 p等
{{}} v-html v-text
模板语法：
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
{{}} 模板语法 优点：简单 方便 缺点：不能解析标签，首屏会出现闪屏问题
v-html 优点：可以解析标签 缺点：不方便
v-text 优点：可以解决首屏闪屏问题 缺点：不方便，不能解析标签
<div id="app">
<h1>模板语法</h1>
<div>{{msg}}</div>
<!-- {{}}内部js解析，{{}}外面 html解析 -->
<div>hello, {{name}}</div>
<!-- {{}} 内部必须遵循js的语法 -->
<div>{{'hello,'+name}}</div>
<!-- {{}} 三元 -->
<div>{{n>10?name:'王昭君'}}</div>
<!-- {{}} 方法 -->
<div>价格：{{price.toFixed(2)}}</div>
<div>{{strHTML}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"画画的baby,画画的baby",
name:"妲己",
n:10,
price:19.90,
strHTML:"<em>哈哈哈哈</em>"
},
methods:{}
})
</script>
表单元素_双向数据绑定_:Input、textarea、select-option …
v-model:双向数据绑定
<div id="app">
<!-- 视图 -->
<h2>{{name}}</h2>
<input type="text" v-model="name">
<button v-on:click="login()">提交</button>
</div>
<script>
// 4.实例化vue对象
new Vue({
//element
el:"#app",
data:{//数据 模型
//双向数据绑定
//MVVM模式： M-model模型 V-view视图 VM-viewModel视图模型
//模型通过 视图模型 控制视图，视图又可以 通过视图模型 修改模型，视图模型是模型和视图之间的桥梁
//MVVM模式
name:"张三"
},
methods:{
login(){
console.log(this.name);
}
}
})
</script>
2.属性绑定
媒体元素：img video
v-bind 简写 ：
v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
<div id="app">
<!-- 属性绑定 v-bind,可以绑定已经存在的属性，也可以绑定自定义属性 -->
<!-- v-bind 后面的内容必须满足js的语法 -->
<a v-bind:href="compony.url" v-bind:title="compony.name">
<img v-bind:src="compony.logo" alt="易烊千玺">
</a>
<!-- 属性可以自己定义 -->
<div v-bind:sum="x+y+'aa'">这是自己定义的</div>
<!-- 简写 : -->
<a :href="compony.url" :title="compony.name">
<img :src="compony.logo" alt="">
</a>
<div :sum="x+y+'aa'">这是自己定义的</div>
</div>
<script>
// 3.实例化
new Vue({
el:"#app",//挂载点
data:{//属性
compony:{
name:"易烊千玺",
url:"https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
logo:"https://bkimg.cdn.bcebos.com/pic/9825bc315c6034a881b02393c413495409237656?x-bce-process=image/resize,m_lfit,h_500,limit_1"
},
x:10,
y:20
},
methods:{//方法
}
})
</script>
动态属性
动态class=>：class
<!-- 第一种方式： :class="变量" -->
<h3 :class="class1">天道酬勤</h3>
<!-- 第二种方式 ： :class="[三元]" 就只有两种情况 -->
<h3 :class="[aa?'red blue':'yellow purple']">人道酬善</h3>
<!-- 第三种方式 :class="{'类名1':boolean,'类名2':boolean}" -->
<h3 :class="{'red':isRed,'yellow':isYellow,'lime':isLime,'purple':isPurple,'blue':isBlue}">商道酬信</h3>
<div v-bind:class="{ active: isActive }"></div>
<script>
new Vue({
el:"#app",//挂载点
data: {
isActive: true,
hasError: false
}
})
</script>
动态style:=>：style
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 或短横线分隔来命名
<!-- 动态style :style="json" -->
<div v-bind:style="styleObject"></div>
<!-- 动态style :style="[数组语法]" -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<button v-on:click="changeColor()">点击字体颜色改为orange</button>
<script>
new Vue({
el:"#app",//挂载点
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
},
methods:{//方法
changeColor(){
this.json.color="orange"
}
}
})
</script>
3.条件渲染
v-if v-show v-else
相同点：
v-if 和v-show 都是true显示，false 消失
不相同点：
v-if false 不加载节点-惰性加载
v-show false 加了display:none；
使用场景：
频繁切换，建议使用v-show,不频繁切换，建议使用v-if.
补充：v-else
v-else必须接着v-if
v-if v-else
<h2 v-if="isShow">优秀是一种习惯</h2>
<h2 v-else>认真是一种态度</h2>
<div id="app">
<!-- v-if 条件渲染，true 出现，false消失。 -->
<h3 v-if="false">画画的baby 画画的baby</h3>
<!-- 0为假，非0即为真 -->
<h3 v-if="-1">奔驰的小野马和带刺的玫瑰</h3>
<h3 v-if="a">优秀是一种习惯</h3>
<h3 v-if="b">认真是一种态度</h3>
<button v-on:click="toggle()">切换</button>
<h3 v-if="isshow">坚持是一种品格</h3>
<h3 v-if="comment.length==0">暂无数据</h3>
<h3 v-if="comment.length>0">有数据</h3>
<hr>
<h3 v-if="comment.length==0">暂无数据</h3>
<h3 v-else>有数据</h3>
</div>
<script>
new Vue({
el: "#app",
data: {
a: true,
b: '123',
isshow: true,
comment:["物美价廉",'特别好',"推荐"]
},
methods: {
toggle() {
/*
if (this.isshow) {
this.isshow = false
} else {
this.isshow = true;
}*/
this.isshow=!this.isshow;
}
}
})
</script>
v-show
<div id="app">
<!-- v-show true 出现，false 消失 -->
<h3 v-show="false">画画的baby 画画的baby</h3>
<button v-on:click="toggle()">切换</button>
<h3 v-show="isshow">坚持是一种品格</h3>
</div>
<script>
new Vue({
//element
el: "#app",
data: {
isshow: true
},
methods: {
toggle() {
this.isshow=!this.isshow;
}
}
})
</script>
4.列表渲染
v-for
v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<div id="app">
<ul>
<li v-for="(item,index) in comment">{{index+1}}-{{item}}</li>
</ul>
<div>
<a :href="item.url" :title="item.name" v-for="(item,index) in website">
<img :src="item.logo" alt="">
</a>
</div>
<div class="box">
<div class="item" v-for="x in goods">
<img :src="x.img" alt="">
<h3>{{x.title}}</h3>
<p>{{x.info}}</p>
<p>{{x.num}}</p>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
comment: ["物美价廉", '特别好', "推荐", "物美价廉", '特别好', "推荐"],
website: [{
name: "京东",
url: "http://jd.com",
logo: "http://img1.360buyimg.com/da/jfs/t1/17098/23/11599/160999/5c90a484E27dd5514/7287f0d182775168.gif"
},
{
name: "淘宝",
url: "http://taobao.com",
logo: "http://img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png"
},
{
name: "百度",
url: "http://baidu.com",
logo: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
},
],
goods: [{
img: "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_360x360xzq90.jpg_.webp",
title: "大豆家 方头奶奶鞋",
info: "一脚蹬设计，方便日常的穿脱。",
num: "378人都说好"
},
{
img: "https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_360x360xzq90.jpg_.webp",
title: "大豆家 方头奶奶鞋",
info: "一脚蹬设计，方便日常的穿脱。",
num: "358人都说好"
},
{
img: "https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_360x360xzq90.jpg_.webp",
title: "大豆家 方头奶奶鞋",
info: "一脚蹬设计，方便日常的穿脱。",
num: "58人都说好"
},
]
}
})
</script>
vue的v-for更新的时候采用的是“就地更新”原则，如果更新的时候想要提高更新的性能，我们需要给vue一个标识，作为对比条件，这个标识必须是唯一的，所以一般使用id.
在脚手架中必须加上key，不然报错
<ul>
<li v-for="(a,b) in people" :key="a.id">
<h3>{{b}}姓名：{{a.name}}</h3>
<p>金额：{{a.money}} <button v-on:click="add(b)">++</button> </p>
</li>
</ul>
5.事件处理
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
6.表单修饰符
<!-- .lazy 失去光标才修改模型数据，优化 -->
<input type="text" v-model.lazy="name">
<!-- .number 将绑定的数据 的数据类型转换为number -->
<input type="text" v-model.number="age" v-on:blur="blur()">
<!-- .trim 去空格 -->
<input type="text" v-model.trim="name">
7.事件处理
事件修饰符，.stop .prevent .capture .self .once .passive
按键修饰符，:keyup.enter :keydown.down
按键码，.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
系统修饰键，.ctrl .alt .shift .meta
鼠标按钮修饰符.left .right .middle，
新增：.exact 修饰符- 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<div id="app">
<!--1. .prevent 阻止默认事件 -->
<div class="box" @contextmenu.prevent="yj"></div>
<!-- 案例 -->
<input type="text" @keydown.38.prevent="up">
<!--2 .stop 阻止事件传播 -->
<div class="outer" @click="outerClick">
<div class="inner" @click.stop="innerClick"></div>
</div>
<!-- 案例 -->
<button @click="isshow=true">删除</button>
<div class="mask" v-if="isshow" @click="isshow=false">
<div class="con" @click.stop="conClick()">
<h3>你确定要删除吗？</h3>
<button @click="isshow=false">取消</button>
<button>确定</button>
</div>
</div>
<!-- 3. .self 触发的目标元素是自身，才执行 -->
<button @click="isshow2=true">删除2</button>
<div class="mask" v-if="isshow2" @click.self="isshow2=false">
<div class="con" >
<h3>你确定要删除吗2？</h3>
<button @click="isshow2=false">取消</button>
<button>确定</button>
</div>
</div>
<!--4 .left .right .up .down .enter .13 -->
<input type="text"
@keydown.up="up2"
@keydown.down="down"
@keydown.enter="enter"
@keydown.left.prevent="left"
@keydown.right="right"
>
<!--5 .capture 捕获 -->
<div class="outer" @click.capture.stop="outerClick">
<div class="inner" @click.capture="innerClick">捕获</div>
</div>
<!-- 6. .native 解决组件绑定不上事件 -->
<hello @click.native="outerClick"></hello>
<!-- 新增：7.点击事件将只会触发一次 -->
<a v-on:click.once="yj"></a>
</div>
<script>
new Vue({
el: "#app",//挂载点
data: {//属性
isshow:false,
isshow2:false
},
methods: {//方法
yj() {
console.log("右键了");
},
outerClick() {
console.log("outer click");
},
innerClick() {
console.log("inner click");
},
up() {
console.log("按了上键");
},
conClick(){},
up2(){
console.log("上键");
},
down(){
console.log("下键");
},
enter(){
window.open("http://baidu.com")
},
left(){
console.log("left");
},
right(){
console.log("right");
},
}
})
</script>
6.MVVM模式
适用：大量的数据增删改查的操作
M-model 模型 V-view 视图 VM-viewModel 视图模型 (控制器)
模型通过控制器决定了视图，
视图可以通过控制器修改模型，
视图模型是模型和视图之前的桥梁。
总结：常用指令
表单元素：v-model
非表单元素： {{}} v-html v-text
属性绑定：v-bind=》： v-on=》@
条件渲染：v-if v-else v-show
列表渲染：v-for
扫一扫
2527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
