Vue.js 是一个渐进式和响应式的前端框架。本文介绍了Vue的基本概念，包括v-cloak用于隐藏未编译的内容，v-bind用于动态绑定属性，v-on用于事件监听，v-if/v-else/v-else-if/v-show进行条件渲染，v-for进行遍历，以及v-model实现双向数据绑定。此外，还探讨了v-on的修饰符、v-for的响应式问题以及过滤器的使用。
Vue
Vue是一套用于构建用户界面的渐进式与响应式框架。
基本概念
| 概念 | 含义 | 介绍 |
|---|---|---|
| MVVM | Model ViewModel View | View层： 视图层，即DOM层，主要的作用是给用户展示各种信息 Model层： 数据层，固定的数据或从网络请求的数据 VueModel层： 视图模型层，是View和Model沟通的桥梁； 实现了数据绑定和DOM监听 |
| options | new Vue()实例化时传入的选项/参数 | el data methods computed: |
| 生命周期 | **待补充 | **待补充 |
| 虚拟DOM与diff算法 | **待补充 | **待补充 |
基本语法
| 语法 | 含义 | 示例 |
|---|---|---|
| mustache | 将data中的文本数据插入到DOM中；响应式 | <h3>{{mustache}}</h3> |
| v-once | 只渲染一次，不会随着数据的改变而改变 | <h3 v-once>{{mustache}}</h3> |
| v-html | 当data中的数据包含html元素标签时，通过v-html进行解析； 常跟的是字符串String类型 | <h3 v-html="url">{{url}}</h3>....url:"<a href=http://www.baodu.com>百度</a>" |
| v-text | 和mustache类似，用于将数据显示在界面中； 通常情况下，接受一个string类型；不常用 | <h3 v-text="message"></h3> |
| v-pre | 跳过这个元素和其他子元素的编译过程，显示原本的Mustache语法 | <h3 v-pre>{{mustache}}</h3> |
进阶语法
1. v-cloak
在某些情况下，浏览器可能会直接显示出未编译的mustache标签（如异步执行）
可以通过设置v-cloak的方式暂时隐藏，在Vue编译后会自动去掉该属性
//会重流重绘
<style>
[v-cloak] {
display: none
}
</style>
<body>
<!-- view层 -->
<div id="app">
<h3 v-cloak>{{message}}</h3>
<button @click="btnClick">点击修改</button>
</div>
<script>
// model层
const obj = {
message: '呜呜呜',
url: "<button>百度</button>",
movies: [1, 2, 3, 4]
}
// vuemodel层
setTimeout(() => {
const app = new Vue({
// options选项
el: "#app",
data: obj,
methods: {
btnClick() {
this.message = "嘻嘻嘻"
}
}
})
}, 1000)
2. v-bind
作用：动态绑定属性
1）a元素的href属性和img元素的src属性等
2）动态绑定class类
对象语法：v-bind:class=“{类名1:boolean,类名2:boolean}”
数组语法：v-bind:class="[类名变量1,类名变量2]"
3）动态绑定内联样式style
对象语法：v-bind:style=“{fontSize:变量1,backgroundColor:变量2}”
数组语法：v-bind:style1="[内联样式变量1,内联样式变量2]"
<style>
.color{}
.aaa{}
.bbb{}
</style>
<body>
<!-- view层 -->
<div id="app">
<!-- href与url属性的绑定 -->
<a v-bind:href="href">海纳百川</a>
<img :url="imgUrl" alt="图片">
<!-- class绑定 -->
<div :class="{color:iscolor}">背景颜色</div><!--color属性名为常量-->
<div :class="[color1,color2]">背景颜色</div> <!--color为变量-->
<!-- 内联样式style绑定 -->
<h2 :style="{fontSize:size,backgroundColor:finalcolor}">style内联样式</h2>
<h2 :style="[baseStyles,baseStyles1]">style内联样式</h2>
</div>
<script>
// model层
const obj = {
href: 'http://www.baidu.com',
imgUrl:'http://222.css.cs',
iscolor:true,
color1:"aaa",
color2:"bbb",
size:"20px",
finalcolor:"red",
baseStyles:{fontSize:"20px"},
baseStyles1:{backgroundColor:"blue"}
}
// vuemodel层
const app = new Vue({
// options选项
el: "#app",
data: obj,
});
</script>
</body>
3. v-on
作用：绑定事件监听器
语法糖写法：@
预期值：Function | Inline Statement | Object
参数：event，其他
参数传递问题：
1.如果方法不需要传递参数，可以省略()调用
2.如果方法需要传递一个参数，但绑定时省略()，则vue会默认将浏览器产生的event事件传入；如果不省略()但未传递参数，则形参为undefined
3. 如果方法需要同时传入多个参数，且需要event对象；在绑定时，可以通过$event的方式传入
v-on修饰符：
1.stop ==>调用event.stopPropagation()，阻止冒泡
2.prevent ==>调用event.preventDefault()，阻止默认行为
3.[keyCode|keyAlias] ==>只有事件时从特定键触发时才触发回调
4.native ==>监听组件根元素的原生事件
5.once ==>只触发一次回调
4. v-if/v-else/v-else-if/v-show
作用：设置条件
v-if：当条件为false时，包含v-if的指令不存存在于DOM中
v-show：当条件为false时,v-show只是给元素添加一个行内样式 display:none
<!-- view层 -->
<div id="app">
<div v-show="isActive">v-show显示</div>
<div v-if="isActive">
<label for="username">账号注册:</label>
<!-- 添加key属性是为了防止切换时虚拟DOM保存之前的值的问题 -->
<input type="text" id="username" placeholder="账号" key="username">
</div>
<div v-else>
<label for="email">邮箱注册:</label>
<input type="text" id="email" placeholder="邮箱" key="value">
<p>闪闪的亮晶晶</p>
</div>
<button @click="btnClick">切换</button>
</div>
<script>
// model层
const obj = {
isActive: true
}
// vuemodel层
const app = new Vue({
// options选项
el: "#app",
data: obj,
methods: {
btnClick() {
this.isActive = !this.isActive
console.log(this.isActive);
}
}
})
</script>
5. v-for
作用：遍历
遍历数组
第一个参数：item
第二个参数：index
遍历对象：
第一个参数：value
第二个参数：key
第三个参数：index(索引) --很少使用
<body>
<!-- view层 -->
<div id="app">
<ul v-for="(value,index) in array">
<li>{{value}}+{{index}}</li>
</ul>
<ul v-for="(value,key,index) in obje">
<li>{{value}}+{{key}}+{{index}}</li>
</ul>
</div>
<script>
// model层
const obj = {
array:['王三','李四','赵武'],
obje:{
name:'korbe',
age:23,
gender:"M"
}
}
// vuemodel层
const app = new Vue({
// options选项
el: "#app",
data: obj
})
</script>
</body>
响应式：
据我们所知，Vue是响应式的，但在v-for中，如果直接通过索引值修改数组/对象中的元素，则遍历出的值不会响应；如this.arrat[0]=‘zz’；
此时，可以利用数组的方法splice或Vue的方法set来实现；数组的方法push,pop,unshift,shift,splice,sort等都是响应式的
1)this.array.splice(0,1,‘bbb’);
2)Vue.set(this.array,0,‘bbb’) //set(要修改的对象，索引值或键值，修改后的值)
官方推荐：在使用v-for时，给对应的元素或组件添加上一个:key属性。作用主要是为了高效地更新虚拟DOM。
6. 过滤器
语法： {{形参 | filters函数}}
<body>
<!-- view层 -->
<div id="app">
<table>
<tr v-for="item in books">
<td>{{item.name}}</td>
<!-- 方法1：getmethods方法 -->
<td>{{getFinalPrice(item.price)}}</td>
<!-- 方法2：过滤器-->
<td>{{item.price | showPrice }}</td>
</tr>
</table>
</div>
<script>
// model层
const obj = {
books: [
{
name: "<<唐吉坷德>>",
price: 12
},
{
name: "<<穆罕默德>>",
price: 29
},
{
name: "<<我的小可爱>>",
price: 40
}
]
}
// vuemodel层
const app = new Vue({
// options选项
el: "#app",
data: obj,
methods:{
getFinalPrice(price){
return "$"+price.toFixed(2)
}
},
filters:{
showPrice(price){
return "Y"+price.toFixed(2)
}
}
});
</script>
</body>
6. v-model
作用：实现表单元素和数据的双向绑定。
<input type="text" v-model="message">
原理：
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
<input type="text" v-bind:value="message" v-on:input="message=$event.target.value"
修饰符：
lazy==>数据在是去焦点或者回车时才会更新
number==>让在输入框中输入的内容自动转换成数字类型
trim==>过滤内容左右两边的空格
<body>
<!-- view层 -->
<div id="app">
<!-- 一.与radio的结合使用 -->
<!-- 1. 添加v-model后，就不需要再添加name属性以使唯一选择了;
2. 注意，要添加value属性，不然gender找不到对应的设置值，设置默认值也无法匹配到对应属性 -->
<label for="male">
<input type="radio" value="男性" id="male" v-model="gender">男
</label>
<label for="male">
<input type="radio" value="女性" id="female" v-model="gender">女
</label>
<span>性别的选择是:{{gender}}</span>
<!-- 二.与checkbox的结合使用 -->
<label for="agree">
<!-- 场景1：单选框
1) v-model绑定识别的为boolean布尔值
2) 此时input的value并不影响v-model的值-->
<input type="checkbox" v-model="isAgree">同意该协议
<button :disabled="!isAgree">下一步</button>
</label>
<!-- 场景2：多选框
v-model绑定识别的为数组元素，直接将选中的内容值(value)添加到新数组中 -->-->
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<!-- 可以直接读取数组内的元素 -->
<span v-for="item in hobbies">我的爱好是:{{item}}<br></span>
<span>我的爱好是:{{hobbies}}</span>
</div>
<script>
// 数据层
const obj = {
gender: '',
// 注意：布尔值不需要加"",是不同的数据类型
isAgree: false,
hobbies:[]
}
// VueModel层
const app = new Vue({
el: "#app",
data: obj
})
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
