Vue框架是什么?
Vue源码主要实现了以下几个功能:
1.通过DOM获取html元素:相当于document.querySelector()
2.将想要显示出来的数据传递给对应的html元素
相当于将一系列dom操作集合成vue.js,然后再调用vue()函数传入参数{},以实现数据的动态显示。
Vue的使用方法:
1.在标签中引入vue.js文件,自动在全局环境中创建一个vue对象,实例化后即可使用。
2.Vue对象实例化,传入一个options对象作为参数(其中包括el、data、methods和其他的一些属性及方法。):
①el:“element,设置元素挂载点(除HTML和Body元素外),可用id选择器,类选择器或元素选择器等。”,数据类型为字符串。
注意:el挂载点定义了vue实例的作用范围,即vue会管理命中元素及其内部的后代元素。
const demo = new Vue({
el:"#app", // id为app的元素及其内部所有子元素均可访问以下data和methods
data:{
message:"hello world!",
},
②data:{以属性键值对的方式声明需要用到的变量并进行初始化赋值(可以是多个变量,用逗号隔开)}。
可以通过app.data中的变量名的方式访问其值(双括号语法显示的也只能是data里的动态数据),但是不可以直接访问data属性本身。如需访问要以app.$data的方式。
注意:需要用的变量可以在这里以对象属性键值对的方式声明,无须var;当然,也可以在全局环境里用var先声明一个变量并赋值,然后再在data里传入,效果都是一样的,区别在于一个是全局变量,一个是局部变量。如:
var num = 1;
const app = new Vue({
el:'#booklist',
data:{
num:num, // num = 1
}
})
console.log(num); // 由于先在外部声明变量,所以在全局环境中可以直接访问;如果要访问app对象内部的,需以属性的方式访问:app.num
options对象除了el和data外,还有methods、computed等,包含了各种函数:
methods:{key:function}, 注意:在data里定义的变量在methods中需要通过this.变量名获取,
生命周期函数:{},为对象类型,
computed:{},为对象类型,
})
3.辅以vue指令的使用
Vue的MVVM模型
M-model:用于传入的数据,可自定义但多从服务器直接获取。
V-view:在页面上显示出来的结果
VM-view model:是model和view的中间桥梁,即new vue()
Mustache语法(双大括号语法)
即html标签中的{{}}写法,用于data动态数据的显示。
语法:{{变量或单个表达式}}
注意:
1.双括号里不能写js代码,如if、for语句等逻辑,只能放数据
2.不能在属性中使用
用法示例1:
<p>{{message}}</p> //最后呈现出message变量对应的值
用法示例2:
<p>{{message}},你好</p> // 最后呈现字符串拼接的结果
用法示例3:
<p>{{message1 + message2}}</p> // 最后呈现出大括号中表达式的结果
Vue的常用指令(插值语法)
1.v-for:遍历
2.v-html
3.v-text
4.v-bind:
(1)动态绑定属性值
<img v-bind:src="url"> // v-bind将scr属性的值看做一个变量,这样即可动态决定src的属性值。
v-bind指令的语法糖写法(即简化写法)
<img :src="url"> // 其实就是把v-bind省略掉,只留下冒号
(2)动态绑定class
①对象语法(重点)
<p :class="{className1:true,className2:false}"></p> // 属性值为true即可为元素添加对应的class,属性值为false则不会为元素添加对应的class
②数组语法
5.v-on:click:事件监听,相当于DOM的onclick事件属性。语法糖写法:
@click:""
6.v-cloak:vue代码解析完后自动删除的一个指令,结合设置样式{display:none}使用。当发生网络延迟时,为了避免动态数据传入不及时,导致显示给用户的结果不是我们想要的,此时可以使用这个指令在页面上隐藏元素。
7.v-pre
8.v-once
9.v-show:为某元素加上display:none,隐藏该元素在页面上的显示,但元素依然存在
10.v-if,v-else-if,v-else:vue的条件语法
计算属性
const app = new Vue({
el:
data:{}
computed:{
属性名:函数 // 用于计算某一属性值的函数
}
})
计算属性里的函数和methods里的函数有什么区别?
计算属性里的函数会检查重复,若计算结果重复,则在html中调用时会筛去重复,只调用不重复的结果;methods则是调用几次计算几次。
例1
<div id="app">
<span v-if="flag">用户账号:<input type="text" value="请输入账号"></span>
<!--v-if和v-else中间不能有其他元素-->
<span v-else>用户邮箱:<input type="text" value="请输入邮箱"></span>
<!--value属性可以用placeholder属性替代更好-->
<button v-on:click="result">切换类型</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app", // 以下定义的所有变量和函数都只会在id为app的元素内生效
data:{
flag:true,
},
methods:{
result:function () {
this.flag = !this.flag; // 从data对象中获取属性和值需要用到this.属性名
console.log(this.flag);
},
}
})
</script>
注意:由于v-if和v-else两个元素是互斥的,而vue在页面上渲染这两个元素的方法其实是一种复用,也就对元素1和元素2取并集(属性和遍若有变化需要进行替换),所以用户后续输入的value(123)也会被渲染出来。
解决方法:在两个元素中加入不同值的标识属性key,作为二者的区别标志,这样vue就不会复用元素及属性了。