1、什么是vue
构建用户界面的渐进式框架
构建用户界面:-----> 帮助程序员来实现页面渲染的
渐进式:--------> 学一点,就可以立即在项目中实用一点,即边学边用
框架:----------> 程序员必须遵守的规则和约束
2、使用vue的4个步骤
1、 导入vue的js文件
<script src="vue路径"></script>
2、 new构造函数,创建Vue的实例对象
3、指定el区域,指定当前的Vue实例要控制的页面上的区域渲染
const vm = new Vue({
el:'#app'
})
4、声明el区域
<div id="app"></div>
3、定义和使用数据
data选项用来定义数据，供页面渲染时使用
代码:
const vm new Vue({
data:{
//数据
}
})
4、 指令
① 什么是指令
指令是vue框架规定的语法规则,可以辅助程序员渲染页面
vue 中的指令按照不同的用途可以分为如下 6 大类：
? ① 内容渲染指令
? ② 属性绑定指令
? ③ 事件绑定指令
? ④ 双向绑定指令
? ⑤ 条件渲染指令
? ⑥ 列表渲染指令
② 内容渲染指令
1、 v-text:
缺点： 覆盖元素的默认内容
例: <p v-text="数据名"></p>
2、插值表达式 {{ }}
例: <p>{{ 数据名 }} </p>
3、v-html
渲染带标签的字符串
例: <p v-html="数据名"></p>
③ 属性绑定指令
1、作用： 动态为元素的属性,绑定属性值
2、语法:
- 完整写法: v-bind:
例: v-bind:src="表达式"
- 简化写法: :
例： :src="表达式"
④ 事件绑定指令
1、作用: 为元素绑定事件监听
2、好处: 在不用获取DOM的前提下,就可以为元素绑定事件
3、使用语法:
完整写法: v-on:绑定事件=“事件处理函数的名字”
简化写法: @绑定的事件="事件处理函数的名字"
4、绑定事件的处理函数
? 需要定义到methods中
① 传统写法
methods:{
绑定的事件函数名:function(){}
}
② 简化写法
methods:{
show(){}
}
5、行内的处理函数
语法: @绑定的事件="单行事件处理"
注意: this需要被省略
6、this的使用
this===vue的实例对象
this是new Vue() 得到的 Vue实例对象
应用场景:
this.数据项的名字
this.函数的名字
7、事件参数对象 $event
是vue内置的特殊变量
应用场景
① 当发现传递的参数把事件参数对象覆盖掉之后,可以手动传递$event进去
例: <button @click="add(2,$event)"></button>
8、事件修饰符
-简化一些事件处理
-语法: @事件名.修饰符=“处理函数”
-常用的修饰符:
① .prevent 阻止默认行为
② .stop 阻止冒泡
③ .capture 以捕获模式触发当前的事件处理函数
④ .once 绑定的事件只触发1次
⑤ .self 只有event.target是当前元素自身时触发事件处理函数
⑤ 双向数据绑定
1、作用:
① data数据的变化,会导师页面的重新渲染
② 表单数据的变化，会被自动更新到data数据中
好处: 开发者不再需要手动操作DOM元素,来获取表单元素最新的值!
2、代码:
<input type="text" v-model="数据名">
3、双向数据绑定的修饰符
.number 自动将用户的输入值转为数值类型
.trim 自动过滤用户输入的首尾空白字符
.lazy 在"change"时而非"input"时更新
⑥ 条件渲染指令
● v-if 和v-show
当v-if和v-show的表达式都是true的时候显示,否则隐藏
代码:
<p v-if="true">我是v-if</p>
<p v-show="true">我是v-show</p>
区别:
1、实现原理不同
v-if指令会动态地创建和移除DOM元素,从而控制在页面上的显示与隐藏
v-show指令会动态为元素添加或移除 style="display:none;" 样式,从而控制元素的显示与隐藏
2、性能损耗不同
频繁切换,则用v-show较好
如果运行时条件很少改变,则使用v-if较好
● v-else 不能单独使用,必须配合 v-if 一起使用
<p v-if="表达式">v-if是true,则显示v-if</p>
<p v-else>否则,显示v-else</p>
●v-else-if 可以多个使用,也是必须配合 v-if 使用, 否则不会被识别
代码:
<p v-if="表达式" >v-if为true，就显示v-if</p>
<p v-else-if="表达式" > v-if条件不满足,就判断v-else-if </p>
<p v-else-if > v-else-if可以 写多个 </p>
<p v-else >以上条件,都不满足则执行v-else </p>
⑦ 列表渲染指令 v-for
1、用来辅助开发者基于一个数据来寻欢渲染一个列表结构
2、语法:
<tr v-for="(item,index) in 数组" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age}}</td>
</tr>
3、注意:
v-for指令,推荐加上key属性的绑定 (既能提升性能,又防止列表状态紊乱)
key的值必须是唯一性,拿索引值当做key没有任何意思,还会影响vue的渲染
过滤器
过滤器(Filters)是vue为开发者提供的功能,常用语文本的格式化。过来不起可以用在两个地方: 插值表达式 和 v-bind 属性绑定
1、调用过滤器代码代码:
<div>
<p>{{ message | 过滤器 }} </p>
<div>
2、声明私有过滤器代码：
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
//私有过滤器
// 声明过滤器的语法:
// Vue.filter('过滤器的名字',过滤器的function函数)
// 过滤器的本质就是一个 function 函数
// 把过滤器的定义放到最前面 再声明Vue的实例对象
filters: {
capt(val) {
//过滤器函数,必须return一个处理的结果,
// 如果没有return任何结果,就是一个无效的过滤器
// 过滤器的function函数 第一个形参永远都是 | 前面哪个值
// 1、把val的首字母转为大写
// charAt(索引) 截取第几位字符
// slice(索引) 从第几位开始截取字符串到最后
const res = val.charAt(0).toUpperCase() + val.slice(1);
//2、把转化的结果,return 出去
return res;
}
}
})
3、声明全局过滤器
<script>
// 全局过滤器
// 声明过滤器的语法:
// Vue.filter('过滤器的名字',过滤器的function函数)
// 过滤器的本质就是一个 function 函数
// 把过滤器的定义放到最前面 再声明Vue的实例对象
Vue.filter('capt', function (val) {
//过滤器函数,必须return一个处理的结果,
// 如果没有return任何结果,就是一个无效的过滤器
// 过滤器的function函数 第一个形参永远都是 | 前面哪个值
// console.log(val);//--->hello vue.js
// 1、把val的首字母转为大写
// charAt(索引) 截取第几位字符
// slice(索引) 从第几位开始截取字符串到最后
const res = val.charAt(0).toUpperCase() + val.slice(1);
//2、把转化的结果,return 出去
return res;
});
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
})
</script>
|