学习Vue最好的方式是看官方文档
1. 使用Vue
1.1流程
①在页面导入Vue.js文件
方式一：<script src="./vue.js"></script>
方式二：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
②写HTML+CSS页面结构
<div id="app">
{{xxoo}}
</div>
③初始化Vue
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:'我是隔壁老梁'
}
})
</script>
喜极而泣😭，恭喜你成功运行你的第一个Vue网页！
接下来难度会越大，可能会导致掉头发噢~~(每个人都会掉头发的啦…🐷)
1.2 Vue挂载点介绍
上个例子有el这个属性，那么这个el属性是干啥的呢🙄？
其实啊~~el属性是一个挂载点，告诉vue，我要把数据显示到页面哪一个元素上，例如app是一个id选择器，则el属性里的需要挂载的元素为: ‘#app’
除了挂载id选择器之外还可挂载其他选择器吗🙄？？
当然可以啦！可以是类选择器、标签选择器！但是Vue官方更推荐用id选择器噢！因为如果el挂载的选择器选中了多个元素，vue只会渲染第一个元素😁。
怎么？你如果不信？？那就吃栗子吧！！
<div class="xxoo">
{{ name }}
</div>
<div class="xxoo">
{{ name }}
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '.xxoo',
// data: 数据
data:{
num:'我是隔壁老梁'
}
})
</script>
/*输出结果：
我是隔壁老梁
{{ num }}
*/
吃完栗子之后这下信了吧！？如果你还不信那就自己打开代码编辑器自己敲一遍试试(⊙﹏⊙)
如果你信了，那么我问你，el能挂载所有的元素的吗？？
思考完之后我告诉你答案吧，不能呢~~因为html和body元素是不能被挂载的，如果挂载就会报错。不信你可以试一下！！！
(ง •_•)ง好了好了，关于el挂载点的最后一个问题要来了！！！
如果没有设置vue挂载点el，会导致什么后果呢？
自己去动手去实践一下。下一章节我会告诉你答案哟😚
1.3 data属性
data的意思你是知道的吧？肯定是数据的意思啦！在vue里面呢，你知道是data属性是干啥的吗？
我猜你肯定大概懂了，我就摊牌了😁。
vue框架是很智能的呢~~，vue是会自动将data中的数据渲染到页面中，而且无需DOM操作噢。
吃个栗子吧！🌰
<div id="app">
{{xxoo}}
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:'我是隔壁老梁'
}
})
</script>
？？？是不是很疑问？为什么这个栗子重复的？
无他，唯有手熟尔(这和撸管差不多，撸多了自然知道自己的G点是哪里了)
1.4 {{}}插值语法
**什么是插值语法呢？**往**插值？？好像也没啥错，就是往标签或者盒子里插值的意思，也就是栗子里面{{}}这个符号，也被一些程序猿叫做 胡子语法。因为长得像胡子，但是我不觉得啊，反而像两个尖锐的乳头，可以叫做乳头语法嘛？？？(太淫荡了！！羞涩🙄)
言归正传吧！插值语法的作用是什么呢？
它的作用就是！！将data中的数据显示到页面
而且啊，最重要的是，插值语法里面可以放二元表达式和三元表达式，还支持数组与对象的属性取值，不过遗憾的是，不支持分支语法和循环语法
来吃个栗子吧！🌰
<div id="app">
<p> 我的名字是： {{ name }}</p>
<p> 我的年龄是： {{ age>=18?'成年人':'未成年' }}</p>
<p> 我的爱好是： {{ hobby[0] }}</p>
<p> 我的老婆是： {{ wife.name }}</p>
</div>
<script>
let app = new Vue({
data: {
name:'隔壁老梁',
age:18,
hobby:['学习','交配','搞基'],
wife:{
name:'大桥未久',
}
}
});
</script>
/*输出结果：
我的名字是： 隔壁老梁
我的年龄是： 成年人
我的爱好是： 学习//肯定是学业为重啦！！
我的老婆叫： 大桥未久//波多野结衣，爱音玛利亚...等！！一个老婆怎么够！
*/
炒完栗子之后我也累了，遇到问题睡大觉吧(开玩笑的~~)，“你这个年龄段,你还能睡得着觉?有点出息没有”.jpg
2. Vue指令
指令顾名思义 指示命令的意思，那计算机指令又什么呢？
告诉计算机从事某一特殊运算的代码的意思
那问题来了😱，Vue指令又是啥意思呢？
指挥Vue框架工作的指示和命令(好像我一直都在扯皮废话~~毕竟是手摸手教学🙄)
下面来看看Vue有哪些常用的指令吧！！
2.1 v-text指令
好像这些指令都不是很有趣，俺也编不出好的比喻让各位同学来加深理解, 不过俺会继续努力的噢!!
先看看它的语法吧！！
v-text=" 值 "
看得懂么？看不懂就继续吃栗子吧🌰！
<div id="app">
<p v-text="xxoo">我爱</p>
<p v-text="xxoo1"></p>
<br>
<p>我爱{{ xxoo }}</p>
<p>{{ xxoo1 }}</p>
</div>
<script></script>
/*输出结果:
波多老师
<h1>大桥老师</h1>
我爱波多老师
<h1>大桥老师</h1>
*/
看到结果了吧? 这次结果是v-text指令会把之前的文本给覆盖掉哦, 回顾起来…是不是和innerText属性很像呢?
还有呢. 胡子语法里面默认的文本还是会显示的噢, 那就总结出它们两个的区别了
①innerText：替换所有的文本内容(会覆盖现有的文本)
②{{插值语法(胡子语法)}} ：替换部分文本内容(只会替换插值部分)
你在案例里是不是有这么的一个疑惑？
为啥·<h1>大桥老师</h1>和<h1>大桥老师</h1>里的h1标签不生效呢？接下来的指令就可以让h1生效了！
2.2 v-html指令
v-html，html： 网页 ； 超文本标记语言的意思，所以啊！它是会解析Vue data里面带有标签的数据哦！具体怎么实现呢？
语法：
v-html=" 值 "
吃个栗子吧🌰！
<div id="app">
<p>我爱{{ xxoo }}</p>
<p v-html="xxoo"></p>
</div>
<script></script>
吃完栗子之后你会发现，大桥老师的h1标签被解析了！
现在知道v-html的作用了吧？？
：设置元素的innerHTML属性值
所以v-html与v-text的区别就呈现出来了
v-text : 不能解析字符串中的标签
v-html : 可以解析字符串中的标签
2.3 v-on指令
v-on，on： 打开；接通的意思。在学习JavaScript的时候是不是有个onclick点击事件？那v-on的作用是什么呢？
给元素绑定事件用的
语法：
(1)标准语法：v-on:事件类型 = "方法名"
v-on:click="doClick"
(2)简洁语法(常用): 把 v-on: 替换成 @
@click = "doClick"
讲啥都没用！！来吃栗子吧🌰！！
<div id="app">
//标准语法
<button v-on:click="doClick">点我</button>
//简洁语法
<button @click="doClick">点我</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
},
/* 事件处理函数 */
methods: {
doClick(){//相当于 doClick:function(){}
console.log('点击我了');
}
}
})
</script>
/*输出结果：
点击按钮则控制台则提示：点击我了。
*/
你是不是发现了上述的代码多了一个methods属性呢？(肯定啦！！你又不眼瞎！！？)
其实Vue规定哈， 事件处理函数都需要写在vue的methods属性中。放在data属性中也可以，但是为了保证代码规范，一般会放在methods里面。
2.4 vue事件修饰符
啥是vue事件修饰符呢？其实就是用来限定事件的行为的，如阻止默认跳转、冒泡等。是不是有点抽象，因为它的范围比较广，实际应用场景很多，例如监听键盘事件，看看用户按了哪些按钮，根据用户按的按钮触发行为。一些搜索框啊，会监听用户的回车键，只要用户按下了回车键就会触发搜索行为。说了这么多，现在懂了吧？
语法：
@事件名.修饰符 = "方法名"
事件修饰符有点多，但还是吃个栗子吧🌰！！
事件修饰符比较多，建议查看 官方文档 更全面一点。
下面，列举出一些常用的修饰符吧
@click.stop : 阻止冒泡
@click.prevent : 阻止默认跳转
@click.enter : 监听enter键
2.5 vue事件方法中this的指向
this指向在面试中经常会被问到。
在Vue事件处理函数中的this指向谁呢？
吃栗子吧🌰！
<div id="app">
<p>我的年龄是:{{ age }}</p>
<button @click="doClick">点击</button>
<!-- 如果是在行内获取data中的成员，不需要通过this,直接获取的 -->
<button @click="age++">变老</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
age:18
},
/* 事件处理函数 */
methods: {
doClick(){//相当于 doClick:function(){}
console.log(this);//vue实例对象
console.log(this === app);//true
//报错,不需要通过data来获取，直接使用实例对象访问即可。
console.log( this.data.age );
//vue会把data和methods中的成员平铺到实例对象中
console.log( this.age );//18
this.age++;
}
}
})
</script>
指向vue实例对象哦
上面分为几个知识点？？
①vue事件处理函数中的this指向谁？
console.log(this);
console.log(this === app);//true
答：指向vue实例对象
②下面这行代码为啥会报错呢？
console.log( this.data.age );
报错啊，在vue中，不需要通过data来获取，直接使用实例对象访问即可。
③那平铺是咋样的呢？？
console.log( this.age );//18
直接省略data，vue会把data和methods中的成员平铺到实例对象中 ，就像挖蚯蚓一样，把它们从地底下拿到平面上来。
④如果是在行内获取data中的成员呢？行内是啥？。
<button @click="age++">变老</button>
就是
@click="age++"啊，一点击就会自增1，其实就像胡子语法那样，不需要通过this,直接在data获取数据。
我好像讲了好多废话，但是你应该懂了是怎么一个回事了吧？
来个有难度的🐷。
如果在vue的methods中使用了箭头函数，则此时this会指向谁？为什么？
先吃个栗子🌰！！
<div id="app">
<button @click="xxoo">点击</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
age:18
},
/* 事件处理函数 */
methods: {
xxoo: () => {
console.log(this.log); //undefined
}
}
})
</script>
是不是有点疑惑？？那你肯定是基础不扎实了。
我来帮你解惑吧
🌟因为箭头函数默绑定父级作用域的上下文，所以不会绑定vue实例， 所以 this 是undefind
还有个特殊情况噢
🌟 在严格模式下this是undefined，在非严格模式下指向window
2.6 vue事件方法传参
跟你讲，其实每一个vue事件都有一个默认参数噢
来吃一个栗子吧🌰！
<div id="app">
<button @click="xxoo($event,age)">点击</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
age:18
},
/* 事件处理函数 */
methods: {
xxoo(e,age){
console.log(e),
console.log(age)
}
}
})
</script>
看到了吧，其实默认参数是
事件对象
如果绑定事件的时候传递了参数，此时则会覆盖事件对象
如果希望不覆盖事件对象，则可以使用$event
2.6 v-bind指令
v-bind，bind结合；捆绑的意思。它的作用是啥呢？顾名思义啊！肯定是和vue捆绑在一起？具体是谁和vue捆绑在一起呢？
语法：
(1)标准语法： v-bind:原生属性 = "值"
v-bind:src="imgPath"
(2)简洁写法：去掉v-bind :原生属性 = "值"
:src="imgPath"
吃个栗子吧🌰！！
<div id="app">
<img :src="imgPath" >
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
imgPath:'图片地址'
}
})
</script>
感受到了吧？？它是和原生标签属性捆绑在一起用的呢。它的作用是
让原生html属性也可以访问 vue中的数据
✔默认情况下，只有v-指令才可以访问data中的成员。标准属性无法访问的。
✔如果希望原生的标签属性也可以访问data中的成员，则可以使用v-bind指令
它也可以绑定样式！！
语法：
:class=" { 类名1:布尔值,类名2:布尔值 } "
//布尔值true:则加载类样式 false:不加载类样式
看看栗子🌰！
<style>
div>div {
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
}
.green {
border: 10px solid green;
}
</style>
<div id="app">
<div :class="{green:true,'blue-box':true}"></div>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
}
})
</script>
这个属性是不是很方便？但是有一个注意点哦
如果类名有-，则需要使用引号包起来
2.7 v-for指令
v-for, for：为了；循环的意思。
这是不是和for循环很像呢？其实是有区别的，for循环可以遍历很多东西，而v-for只能遍历某个标签元素而已哦。就是v-for写在谁身上，就表示重复生成谁
语法：
v-for="(item,index) in 数组名"
吃个栗子 🌰 ！
<div id="app">
<ul>
<li v-for="(item,index) in list">
<span>下标：{{ index }}</span>
<span>内容：{{ item }}</span>
</li>
</ul>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
list:[
'波多野结衣',
'苍井空',
'大桥未久',
'爱音玛利亚'
]
}
})
</script>
现在懂了吧！？
2.8 v-model指令
v-model，model： 模型的意思。
v-model是重点内容噢，它能让数据双向绑定。啥是双向绑定呢？
修改了表单里面的值，此时data中的数据也会跟着变化
修改了data中的数据，表单的值也会跟着变化
而且是实时更新数据哦！
语法：
v-model="属性名"
吃个栗子🌰！
<div id="app">
<input type="text" placeholder="请输入用户名1" v-model="username">
<input type="text" placeholder="请输入用户名2" v-model="username">
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
username:''
}
})
</script>
输入数据的时候是不是两个表单的数据都一样？这不是废话么？肯定一样啦！！
要注意哦(⊙o⊙)
v-model只能用于表单元素
v-model属性名一定要在data中声明
讲了这么多，那双向绑定的意义又是啥？
快速 获取 表单的值
快速 设置 表单的值
2.9 v-if指令
说到v-if指令，其实就是条件判断，不过Vue里面呢，是根据条件去渲染元素。
语法：
v-if="条件：true或false"
例如：
<p v-if="age>=16">我十六岁了，拥有交配的权利了。</p>
如果`age`大于或等于16就显示上述的<p>标签。
懂了对吧？？
v-if还可以搭配v-else-if和v-else一起用噢，具体怎么用呢？？
那就吃栗子吧🌰！
<div id="app">
<input type="text" placeholder="请输入你的考试分数"
<br
<p v-if="score<60">“爸爸别打了！再打人就没了！！”</p>
<p v-else-if="score<=80">爸爸给我买了个精致飞机杯</p>
<p v-else-if="score<=90">爸爸给我买了高仿充气娃娃</p>
<p v-else>爸爸给我买了个老婆</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:0
}
})
</script>
//输出结果：输入的分数符合哪个条件，哪个条件就显示噢，不信可以试试
和你之前学的JavaScript基础里的条件判断，是不是一模一样？？
不过，这里面的注意点是：
v-else前面必须要有v-if或v-else-if多分支必须以
if开头，中间可以多个else-if
2.10 v-show指令
v-show，show是显示的意思，害，也是你学CSS时候的display属性。不过v-show是根据布尔值来判断显示或隐藏的，
语法：
v-show="布尔值：true：显示；false：隐藏"
关于v-show怎么用呢？
吃个栗子吧🌰！！
<div id="app">
<p v-show="xxoo">我是v-show指令</p>
<p v-if="xxoo">我是v-if指令</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:false
}
})
</script>
如果你吃了这个栗子，那么你会发现，两个<p>都被隐藏了。
那产生了一个问题，v-show和v-if不都是讲元素给隐藏起来了咩…那我干脆用v-if算了，何必多此一举。别急！慢慢听我讲，区别可大了！！就好像Z奶和A奶的区别！！
v-show与v-if区别是
v-if:如果值为false，这个元素不会渲染到DOM树
v-show: 根据条件修改元素display值，
v-show:如果只为false,这个元素还是在DOM树上，只是display值为none
现在知道区别了吧？？如果你跟我讲DOM树到底是什么？那我建议你重新复习一下JavaScript基础了
JavaScript的教学就不是手摸手了，是嘴对嘴的了！！😍
2.11 v-cloak指令
v-cloak ，cloak：遮掩；隐匿的意思，在Vue里，需要在Vue渲染数据之前显示CSS样式就得用v-cloak指令了。
语法：
<style>
[v-cloak]{
}
</style>
<p v-cloak></p>
语法有点怪异，直接写在<style>样式里，注意哦，使用这个指令一定要写对应的css样式，不然会报错。说到底呢，v-cloak指令本质其实是一个属性选择器，Vue完成渲染就会移除这个属性，不会占据内存。
来吃个栗子吧 🌰 ！！
<style>
[v-cloak]{
background-color: green;
}
</style>
<div id="app">
<p v-cloak>{{xxoo}}</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo="隔壁老王"
}
})
</script>
事先说明一下，这效果刷爆手指头都不会出来的。需要在浏览器打断点才可以看到效果。那v-cloak的应用场景是啥呢？
网页的懒加载，例如京东主页，拉下去你会发现，数据没加载完就会有灰色的空框框，那就是懒加载噢，也就是在页面数据没加载完前，用显示灰色的空框框占用位置而已。用
v-cloak也可以实现。
2.12 v-once指令
v-once，once：一次的意思。v-once有啥作用呢？？
让vue只能渲染一次，就算你刷新了，它还是显示原来的样子。
你看我介绍得这么短，就知道这个指令没啥JB用😂，因为它的应用场景很少
看看栗子吧🌰 ！
<div id="app">
<p v-once>我使用了once指令：{{xxoo}}</p>
<button @click="xxoo++">点我成长</button>
<p >我没有使用once指令：{{xxoo}}</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo="隔壁老王"
}
})
</script>
吃完这个栗子之后你会发现，第一个p标签并没继续增加数字。
2.13 v-pre指令
v-pre，pre：之前的意思， 它的作用呢，就是让vue不渲染指定的元素。
语法：
v-pre
唉😔，其实这个指令应用场景也很少，不过还是要了解的啦。不然产品经理给你提需求，你肯定吐了。
吃个栗子吧 🌰！！
<div id="app">
<p>我没有使用pre: {{ xxoo }}</p>
<p v-pre>我有使用pre: {{ xxoo }}</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写，element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo="隔壁老王"
}
})
</script>
吃完了吧，我还是说一下吧，它的应用场景
一个技术博客给别人介绍vue语法的时候，就需要使用这个指令来让vue不要渲染。
则vue渲染之后，用户看不到语法，只能看到渲染后的数据了。
手摸手教Vue入门篇①就到此吧，下次再写咯❤
Comments | NOTHING