一、Vue开篇
- 1.什么是框架？
框架是一套完整的解决方案，对项目的‘侵入性’较大，项目如果要更换框架，需要重构整个项目 - 2.Vue核心优势
2.1 数据驱动界面更新，无需操作DOM来更新界面
2.2 组件化开发，把网页拆分为一个个独立的组件来编写，再把组件整合成网页，如下图
- 3.MVVM设计模式
M —— Model 数据模型(用于保存数据，处理数据业务逻辑)
V —— View 视图(展示数据，用户交互)
VM —— View Model 数据模型和视图的桥梁 - Vue中MVVM的划分
- M —— Vue实例对象中用于存放数据的data
- V —— 绑定id = ‘app’的视图展示区域
- VM —— 我们创建的Vue实例对象
// Vue的使用步骤 1.导入vue框架
<script src="Vue/vue.js"></script>
// 这个app展示区域就是V 视图
<div id="app">
<p>{{ message }}<p/>
<div />
<script>
// 2.创建Vue实例对象
// Vue实例对象就是VM 数据模型和视图的桥梁
const vue = new Vue({
// 3.告诉vue的实例对象将来需要控制界面中的哪一个区域
el: '#app',
// 4.告诉vue的实例对象,被控制区域的数据是什么
// 这里的data就是MVVM中的M 数据模型
data: {
message: 'hello Vue'
},
});
</script>
二、Vue常用指令学习
- 1.Vue中数据的双向传递
可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定
<script src="Vue/vue.js"></script>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
const vue = new Vue({
el: '#app',
data: {
msg: "哈哈哈"
},
});
此时可以通过在网页中修改input中的msg，data中存储的msg也会跟着改变
- 2.v-once指令 —— 加上这个指令的元素或组件只会被渲染一次
- 3.v-cloak指令
首先要清楚Vue绑定数据的过程：
先将未绑定数据的界面展示给用户
在根据数据模型中的数据和控制的区域生成绑定数据之后的html代码
最后把绑定数据的html渲染到页面上
在网络较慢时用户可能会看到未绑定数据渲染出来的页面（模板内容），用户体验就不太好，可以通过 v-cloak 指令来默认隐藏未绑定数据的页面，等生成绑定数据的html代码再渲染页面，来提升用户体验
v-cloak要配合 [v-cloak] { display: none } 来使用
- 3.v-text 覆盖原有模板内容，不解析HTML，相当于innerText
v-html 覆盖原有模板内容，解析HTML，相当于innerHTML - 4.v-if 条件渲染：就是v-if的条件取值为true就渲染元素，为false就 不创建 不渲染元素
v-if 的条件可以是data中的数据，也可以直接是true / false，也可以是 age > 18这样的表达式
v-else 和 v-if 配合使用，不能单独出现，且在v-if 和 v-else中不能出现其他内容
v-else-if
<div id="app">
<p v-if="show">我是true</p>
<p v-if="hidden">我是false</p>
<p v-if="age < 18">青年人</p>
<p v-else-if="age >= 45">中年人</p>
<p v-else>老年人</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
show: true,
hidden: false,
age: 11
},
});
</script>
-------------------我是分割线---------
- 5.v-show 也是根据条件true /fasle来决定显示与否，不过使用v-show的元素节点不论条件为true 还是false都会创建节点，只是样式设置为disply: none;
当节点需要频繁显示隐藏时推荐使用v-show，因为v-for节点频繁创建是很消耗性能的
<div>
<p v-if="show">{{msg}}</p> // 这个节点不会被创建
<p v-show="show">{{msg}}</p> //这个节点会被创建
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
show: false,
msg: '我显示出来啦'
},
});
- 6.v-for 循环遍历，可以遍历数组，字符串，数组，对象
- v-for的注意点: v-for在渲染元素时，会先查看缓存中有没有需要渲染的元素；如果没有，就创建一个新的元素放在缓存中；有就会直接复用缓存中已有的元素。为了避免复用元素导致错误复用，我们需要给元素绑定一个唯一的key v-for在更新已经渲染过的元素列表时，会判断key是否相同，相同则复用，不同则重新创建。注意：不能用 index当作key，因为当增添或者删除数组中的一项时，前后index都会改变，key要选择独一无二且不变化的
<div>
<ul>
<li v-for="(value,index) in movies">{{ index }} --- {{ value }} </li>
</ul>
<p v-for="(value,key) in obj">{{ key }} --- {{ value }}</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
movies:['扫毒','证人','激战'],
obj:{
name: 'lxh',
age: 21,
gender: 'girl'
}
},
});
</script>
- 7.v-bind 用于给元素的属性绑定数据
v-bind: 属性名称 = ‘绑定的数据’
语法糖写法 : 属性名称 = ‘绑定的数据’ - v-bind 绑定类名
<div id="app">
<p class="size color bgc">{{ name }}</p>
/*注意点：
如果通过v-bind来绑定类名，不能直接赋值类名的名称
因为v-bind会去Model中查找数据，但是Model中没有对应的类名，所以直接绑定类名无效*/
<p :class="size color bgc">{{ name }}</p>
/*注意点：
如果想让v-bind去style中查找类名，那么要把类名放在数组中，
但是放在数组中默认还是会去Model中查找，将类名放在数组中之后还要给类名添加引号*/
<p :class="[size color bgc]">{{ name }}</p>
<p :class="['size', 'color', 'bgc']">{{ name }}</p>
/*注意点：通过v-bind绑定的类名可以通过三目运算符来实现按需绑定*/
<p :class="['size', 'color', flag ? 'bgc' : '' ]">{{ name }}</p>
/*注意点：
通过v-bind绑定的类名可以通过对象来决定是否需要绑定
格式： {'绑定的类名': 是否绑定}*/
<p :class="['size', {'color' : false}, {'bgc' : true}]">{{ name }}</p>
/*注意点:如果是通过v-bind来绑定类名，可以通过从Model中获取的对象来绑定*/
<p :class="obj">{{ name }}</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
obj:{
'size': true,
'color': true,
'bgc': true
}
},
});
</script>
- v-bind 绑定样式
<div id="app">
/*注意点：
通过v-bind绑定样式，要把样式放在对象中，样式的取值要用引号括起来，
如果样式名称中有-的，也要用引号括起来*/
<p :style="{color: 'green', 'font-size': '50px'}">{{ name }}</p>
/*如果Model中保存了多个样式的对象，想同时把多个样式的对象绑定给style，可以把对象放在数组中赋值给style */
<p :style="[obj1, obj2]">{{ name }}</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
name: "hello vue",
obj1:{
"color": "purple",
"font-size": "30px"
},
obj2:{
"background-color": "yellow"
}
},
});
</script>
- 8.v-on 绑定事件
注意点：
可以通过v-on来为元素绑定监听事件，v-on绑定的事件不用on, 比如onclick事件只需要写 v-on: click= ‘事件名称’
绑定事件时，给事件赋值的是回调函数的名称，把函数写在Vue实例中的methods中
语法糖：@click=‘fn’
<div id="app">
<button v-on:click="fn">我是按钮</button>
<button @click="fn">我是按钮</button>
</div>
<script>
let vue = new Vue({
el: '#app',
methods:{
fn() {
alert("绑定成功啦222");
}
}
});
</script>
- 9.v-on修饰符
- .once 只触发一次回调
- .prevent 调用event.preventDefault()，阻止默认行为
- .stop 调用event.stopPropagation()，阻止事件冒泡
- .self 只有当事件是从绑定事件的元素自身触发的才会执行回调
- .capture 执行事件捕获模式
v-on注意点：
v-on绑定事件时可以加 ( )，也可以不加，绑定的事件可以传参，参数可以是event事件对象 $event
在绑定的函数中要用data中的数据要加上this - 10.v-on按键修饰符
@keyup.enter = “fn” 使用了.enter修饰符就只有按下了enter键才会触发这个事件，还有 .esc / .tab / .left / .right / .space 等按键修饰符。还可以根据keyCode自定义按键修饰符
<div id="app">
<input type="text" @keyup.enter="fn">
<input type="text" @keyup.f2="fn">
</div>
<script>
//自定义按键修饰符
Vue.config.keyCodes.f2 = 112;
let vue = new Vue({
el: '#app',
methods:{
fn(){
alert('我被触发了~~');
}
}
});
</script>
- 11.自定义全局指令
- 通过Vue.directive('自定义指令名称，不需要v- ', function(el){ … })来自定义指令。这里用到了两个钩子函数
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- 自定义指令传参
<div id="app">
<p v-color>{{ name }}</p>
<input type="text" v-focus>
<p v-color="'blue'">{{ name }}</p>
</div>
<script>
Vue.directive('color',{
//这里的 el 就是被绑定指令的元素
//自定义指令可以传递参数，是一个对象obj，
//通过obj.value来接收参数，即指令的绑定值
bind: function (el,obj) {
el.style.color = obj.value;
}
});
//要让input表单在一进入页面就有聚焦，要把自定义指令绑定在inserted生命周期上才有用
Vue.directive('focus',{
inserted: function (el) {
el.focus();
}
});
let vue = new Vue({
el: '#app',
data: {
name: "今天也要加油啊"
},
});
</script>
- 12.自定义局部指令
let v = new Vue({
el: '#res',
data:{
msg: '今天天气可真好'
},
//把自定义局部指令放在这里
directives: {
'color':{
bind: function (el,obj) {
el.style.color = obj.value;
}
}
}})
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
