1.官方文档
Vue.jsVue.js - The Progressive JavaScript Framework
https://cn.vuejs.org/如果此文档打不开（科学上网）
或者
在官方文档中，会介绍vue的语法以及怎么使用
感觉vue是通过操纵数据来改变页面的，页面是数据的展示。通过数据改变dom，不用直接操作dom
使用vue的好处，能够实现前后端的完全分离，有助于开发效率的提升
那怎么使用vue？
vue就跟jquery一样是一个js文件，所以我们在使用的时候可以去官网下载vue.js
然后将包导入你想操作的html页面
或者使用cdn
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue基础
1.el挂载点
具体内容看官方文档
主要感觉是为了绑定标签，相当于document获取dom结构
<body>
<div id="app" >
{{message}}
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>可以看到在通过创建vue对象，在对象中通过el挂载点，绑定div标签，在这里data属性是数据部分
我们通过给message赋值实现将内容反馈给div，这里的{{}}语法相当于v-text指令，这边后边会介绍。同时可以获取类选择器，标签选择器，但是最好使用id选择器，对各种标签均可使用，唯独不能单标签，以及body和html标签
2.data：数据对象的使用
data里面可以放各种数据
比如string类型数据、对象、以及数组
获取对象以及数组时需要遵循js的语法
比如
data:{
message:"hello vue",
school:{
name:"一中",
teacher:"老李"
},
campus:["a","b","c"]
}获取数据时
{{message}}
{{school.name}}
{{campus[0]}}
vue指令（以v-开头的一些特殊语法）
1.内容绑定，事件绑定
v-text：设置标签的文本值（textContent）
简单点说就是显示内容
两种使用方法
（使用了别人的图片还请见谅）
第一种会把全部内容替换掉，第二种差值表达式，只会代替一部分内容
v-html：设置标签的innerHTML
如果是普通的文本，则会与v-text无区别
但若是包含html内容，则会被解析出来
比如
var app =new Vue({
el:"#app1".
data:{
message:"<label>hello vue</label>"
}
})或者label标签会被解析出来的哦
v-on：为元素绑定事件
语法描述：
（html）v-on:click="函数名"
（js）method：{
dolt：function（）{
}
}
v-on: ==@
相当于 v-on：click == @click（这个使用的更多）
注意：method与el同级别
2.显示切换，属性绑定
v -show：根据表达值的真假，切换元素的显示和隐藏
跟display一样，在这里更好的体现了什么是数据改变dom
v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
注意：
v-if是直接删除dom树，操作的是dom树 v-show是操作的样式
频繁的切换v-show反之用v-if ，前者的切换消耗少
v-bind：设置元素的属性（比如：src，title，class）
class属性名切换，可以更好的实现，css样式切换，毕竟直接改值就可以了
第一个三元表达式好理解一点
第二种是采用对象的方法，active时class名：改变false和true实现样式的显示和消失
需要动态的增删class建议使用对象的方式
3.列表循环，表单元素绑定
v-for：根据数据生成列表结构
数组
对象
v-on指令的补充
传递自定义参数，事件修饰符
第二个是什么意思呢？
意识时回车键盘响应这个函数
v-model：获取和设置表单元素的值（双向数据绑定）
（处理数据的输入输出）输入的数据会与data属性的值保持一致
双向的哦
input里面的数据改变
message也同时修改
反之如此
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
