Vue是什么？
借用官网的介绍：Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面（View）的渐进式MVVM框架。Vue 被设计为可以自底向上逐层应用。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue官方教程网址
使用Vue
1、我们要使用vue，有两种方式
(1). 一是在咱们的传统项目中使用，通过script标签来引入vue.js的库，这个vue.js的库可以在官网上找到，同时我们还可以通过引入CDN的方式来引入vue的js库，在这里，官方给我们提供了两个版本的CDN
//开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
(2). 二是使用vue-cli脚手架来搭建一个项目
①、使用脚手架首先需要有node环境，使用 node -v来查看本机node版本
②、然后使用 npm install @vue/cli -g 命令来全局安装 vue-cli 3.x 版本
③、如果需要同时使用vue-cli2.x版本的话，通过 npm install @vue/cli-init -g命令来安装一个桥梁，此时我们就可以同时使用 vue-cli3.x 和 vue-cli2.x 了
2、开始 Vue 项目
-
我们先不使用 vue-cli 工具来搭建项目，先熟悉一下vue的语法和各种指令，
-
首先我们新建一个index.html文件，然后通过script标签引入vue的js文件或者CDN
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> var app = new Vue({ el:'#app' }) </script> </html> -
首先这个html文件中，我通过script标签引入了vue.js本地文件，并且在body下方的script内部写了这样一个代码
var app = new Vue({ el:'#app' }) -
咱们通过new Vue创建了一个Vue的实例，并且通过el这个属性，将 Id 为 app 的 div 绑定到了这个Vue实例上，让这个Vue实例接管了咱们的这个div元素
-
然后，我们来试一试输出一段话
-
<body> <div id="app">{{msg}}</div> </body> <script> var app = new Vue({ el:'#app', data:{ msg:'hello Vue!' } }) </script> -
然后打开这个html文件，我们就可以看到页面上输出了 hello Vue!
-
我们来看一看上边的这个代码 首先在script中 我们定义了一个data属性，这个属性对应的是一个对象，而这个对象中有一个叫msg的属性，对应的值为hello Vue!，然后在我们的div模板中，我们使用{{msg}}的方式，调用了这个变量，并在页面上显示出了它所对应的值
-
data
data这个属性，保存了我们这个Vue实例上的所有的基本数据
{{ }} 双花括号是Vue语法中的插值表达式可以将我们Vue实例中的数据渲染到页面上去 -
除了差值表达式{{}}以外，我们还可以通过两个Vue的指令来将我们的数据渲然到页面上去，这两个指令就是 v-text 和 v-html
-
v-text 和 v-html
首先我们来看看怎么使用这个Vue的指令
<div id="app">
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
然后我们打开页面可以看到和插值表达式一样的效果，我们的hello Vue! 同样的被渲然到了页面上，然后，我们来看看它们之间有什么区别
插值表达式{{ }}和v-text与v-html之间的区别
我们可以试着把msg这个数据，改成一个这样的格式： msg:'<h3>hello Vue!</div>'
接着我们打开页面，我们会发现 v-text 和 {{}} 插值表达式输出的是纯字符串 在页面上并没有渲染出 h3 标签
而v-html正确的解析了 html 标签，这就是他们之间最大的区别，
而且，一般来说，绝不要对用户提供的内容使用v-html，因为它很可能对你的网站造成攻击
而且，在使用vue的指令的时候，我们是可以在指令中输入javascript表达式的，表达式就是 +、-、*、/、三目运算符、以及数组字符串等的方法，
但是，建议不要直接在指令中做复杂的方法调用，或者判断，可以通过后期学习的vue的过滤器和计算属性来实现复杂的运算和方法调用等
13、v-bind 属性绑定
在使用vue的过程中，我们经常会和v-bind打交道，v-bind可以将一个html标签的属性绑定到vue实例上，使其可以使用vue实例中的数据作为属性值，或者在其属性中进行某些运算或判断
举一个最简单的例子
html:
<div id="app">
<div v-bind:class="content">这里是随便写的</div>
</div>
js:
var app = new Vue({
el:'#app',
data:{
content: "myText"
}
})
按照html的情况来说 ，此时我们的div应该是有一个叫content的class类名，
但是，由于我们使用了v-bind属性绑定，所以，我们会发现，现在的div竟然有一个叫 myText 的class类名，这，就是v-bind属性绑定，就是把原有的html标签属性，绑定到Vue的实例上去，可以使用 Vue 的数据
然后我们在写一点高级的使用方法：
html:
<div id="app">
<div v-bind:class="{content:flag}">这里是随便写的</div>
</div>
js:
var app = new Vue({
el:'#app',
data:{
flag:true
}
})
这个时候，我们可以看到，我在div标签上写了一个v-bind:class="{content:flag}"一个对象格式的数据，而在我们的js中，有一个flag布尔值，暂时为true，然后我们打开浏览器， 可以看到在我们的div上绑定了一个content的class类名，
然后，我们回到代码中，将flag的值修改为false，
再次打开浏览器，会发现这个div它现在已经没有这个类名了
这个就是做了一个简单的判断，当条件成立的时候，添加一个class类名，否则删除这个class类名，至于这个class类名的样式，那就是看官您的喜好了
在绑定属性的时候，我们也可以传入一个数组，还是拿class来举例
<div v-bind:class="['one','two',{three:false}]"></div>
这个时候，我们打开浏览器，可以看到这个div它加上了 one、two两个类名，而three这个类名由于是false，所以没有添加上，如果想添加上也很简单，只需要把false改为true就可以了
而以上的条件判断等只是为了方便举例，在实际应用中，我们可以写一个返回布尔值的添加表达式， 例如：3>0 返回 true
由于v-bind的常用性，所以vue给我们提供了一个快捷语法
v-bind: 简写为 ： 一个冒号，例如：
<div v-bind:class=" 'one' "></div>
<div :class=" 'one' "></div>
上例得到的结果是一样的
14、vue的条件渲染 v-if v-show
在vue中，提供了非常便捷的条件渲染方式，当条件成立的时候，显示指定的DOM标签，不成立的时候，不显示指定的DOM标签
html:
<div id="app">
<div v-if="flag">这里是随便写的</div>
</div>
js:
var app = new Vue({
el:'#app',
data:{
flag:true
}
})
此时我们打开浏览器页面上正常显示这个div标签，而当我们把flag改为false的时候，这个div标签就不显示了，打开控制台，我们可以看到这个div标签已经完全消失了
而v-if还可以结合v-else、v-else-if来一起使用
使用方法如下：
html:
<div id="app">
<div v-if="flag">这里是条件成立的时候显示的</div>
<div v-else>这里是条件不成立的时候显示的</div>
</div>
js:
var app = new Vue({
el:'#app',
data:{
flag:true
}
})
二、
html:
<div id="app">
<div v-if="num>3">这里是条件成立的时候显示的</div>
<div v-else-if="num===3">这里是num等于3的时候显示</div>
<div v-else>这里是条件不成立的时候显示的</div>
</div>
js:
var app = new Vue({
el:'#app',
data:{
num:3
}
})
v-if 可以单独使用，当条件成立的时候在DOM节点渲染该元素，不成立的时候在DOM节点中不渲染该元素，v-if具有惰性，它会等到条件成立的时候再执行并进行渲染
v-else 必须与v-if组合使用，当v-if的条件不成立时，渲染v-else的元素
v-else-if 必须与v-if组合使用，当v-if的条件不成立时，再次进行判断，是否符合当前if的判断，如果当前条件成立，则渲染当前元素
v-show
html:
<div id="app">
<div v-show="flag">这里是条件成立的时候显示的</div>
<div v-show="!flag">这里是条件不成立的时候显示的</div>
</div>
js:
var app = new Vue({
el:'#app',
data:{
flag:true
}
})
此时我们打开浏览器，可以看到在页面上显示了条件成立的那个div，而打开控制台的Element面板，我们可以看到的两个div都被渲然出来了，只不过，条件不成立的那一个添加了一个css样式display：none；所有，才会隐藏
v-show 条件渲染
无论条件成不成立，该元素都会在DOM节点中渲染出来，只不过！！：条件成立的时候该元素显示，条件不成立的时候，该元素display:none;
v-if 和 v-show 的应用场景
如果需求是需要经常切换元素的显示和隐藏，使用v-show得当效率更高，因为v-show只是简单的基于css进行切换
如果你只需要做一次条件判断或者说运行条件很少改变时，使用v-if更加合适,
15、Vue的列表渲染 v-for
在Vue中提供了特别便捷的列表渲染方式，渲染数组的每一项、即为列表渲染
使用方法如下：
html:
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
js:
var app = new Vue({
el:'#app',
data:{
list: ['苹果','香蕉','梨','橘子','火龙果','桃']
}
})
然后打开浏览器，可以看到在浏览器的页面上，正确的渲染出了我们list列表里的每一项数据，而且每一项数据，都是一个 li 标签，说明：v-for指令 使用在需要列表循环渲染的标签上，会遍历列表的每一项、并输出到页面上
在使用 v-for 的时候，我们应该给元素绑定一个 key 值，这个 key 值必须是不重复的，在大部分时候，我们应该使用 id 来作为 key 值，如果没有 id，那么也可以勉强使用 index 下标来作为 key 值，但是不建议这么做
那么，我们对上述的代码再进行一次改变
html:
<div id="app">
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>
</div>
js:
var app = new Vue({
el:'#app',
data:{
list: [
{name:'苹果', id: 1}
,{name:'香蕉', id: 2}
,{name:'梨', id: 3}
,{name:'橘子', id: 4}
,{name:'火龙果', id: 5}
,{name:'桃', id: 6}
]
}
})
这个时候，我们的代码就比较符合规范，也比较完善了，需要注意的是：
1、key 值必须是独一无二的，一般对于我们前端来说，后台返回的数据中肯定会有一个独一无二的 id，所以我们使用 id 是比较好的
2、v-for可以使用for in 循环遍历，也可以使用for of循环遍历
3、在v-for的条件中 (value,key,index) 第一个是value(内容),第二个是key(对象的属性名，数组的下标),第三个是index(索引值)
16、v-on 和 methods -------- Vue的方法定义及使用
在Vue中，我们所有的方法应该写在methods中：
html:
<div id="app">
<h1 v-show="flag"></h1>
<button v-on:click="show()">显示隐藏</button>
</div>
js:
var app = new Vue({
el: '#app',
data: {
msg: 'hello Vue!',
flag: true
},
methods: {
show: function() {
this.flag = !this.flag;
}
}
})
首先，我们在script中的Vue实例上，写了一个methods，然后写了一个show方法，而这个show方法所做的事情，就是将flag的布尔值取反
需要注意的是：在Vue实例当中，我们要调用当前实例上的数据或者方法的时候，我们通过this.属性、this.方法() 来调用，这个是Vue的底层给我们封装好的
然后，我们在html中的button上，写了一个v-on:click=“show()”，这个v-on指令，就是在我们的DOM节点上绑定事件，v-on是绑定事件的指令、click是触发的事件、show是我们在Vue实例中写好的方法
接着，我们打开浏览器，点击按钮，可以看到我们的<h1>hello Vue!</h1>在不停的显示隐藏
在这里，我们使用了 v-on 和 methods ，绑定事件，以及定义事件
而在Vue中，v-on的使用频率也非常高，所以，它同样有自己的简写 @ 符号，写法如下：
<button v-on:click="show()">显示隐藏</button>
<button @click="show()">显示隐藏</button>
17、v-model 数据的双向绑定
在Vue中，为表单元素提供了一种非常便捷的数据获取及修改的方法，就是v-model，它可以使Vue实例中的数据与表单元素的value值绑定起来
html:
<div id="app">
<h1>{{inputValue}}</h1>
<input type="text" v-model="inputValue"/>
</div>
js:
var app = new Vue({
el: '#app',
data: {
inputValue: ''
}
})
然后我们打开浏览器，在input中输入内容，可以看到我们 h1 标签中的内容会随着我们 input 的输入而改变，说明input的 value 发生改变的时候我们 Vue 实例中的 inputValue 也同步发生了改变，这样我们就完成了一个简单的数据同步，然后，我们还可以再深入一些
html:
<div id="app">
<h1>{{inputValue}}</h1>
<input type="text" v-model="inputValue"/>
<button @click="clearInput()">清空input</button>
</div>
js:
var app = new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
clearInput: function() {
this.inputValue = '';
}
}
})
然后，打开浏览器，输入是没有问题的，点击 button 按钮，可以看到清空了input，说明事件正常执行，我们在修改了Vue实例上的数据的时候，input的value也同步发生了改变
18、最后，我们一起写一个简单的案例，以便于更清晰的认识Vue的这些指令
一个简单的添加和删除案例
1、当没有数据的时候显示暂无数据，当有数据的时候显示数据
2、点击添加将input的数据添加到表格当中，并清空input
3、点击删除则删除当前点击的这一个
<body>
<div id="app">
<p>商品名称</p>
<input type="text" v-model="name">
<!--v-model数据双向绑定-->
<p>商品价格</p>
<input type="number" v-model="price">
<!--v-model数据双向绑定-->
<p><button @click="addShop">添加商品</button></p>
<!--v-on绑定事件-->
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<!--v-for列表渲染，v-bind绑定key值为index-->
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<td>{{item.count*item.price}}</td>
<td><button @click="remove(index)">删除</button></td>
<!--v-on绑定事件，并且给事件传参，传入index值-->
</tr>
<tr v-if="list.length<=0">
<!--v-if判断，当list数组的长度小于等于0的时候显示，否则隐藏-->
<td colspan="6" style="text-align: center;">暂无数据</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
//数据
name: '',
price: 0,
list: []
},
methods: {
//方法
addShop: function() {
//添加功能，利用数组的push方法，向list数组中添加数据
this.list.push({
name: this.name,
price: this.price,
count: 1
});
//添加完成后清空输入框
this.name = '';
this.price = 0;
},
remove(index) {
//删除功能，利用数组的splice方法，删除从index开始的1条数据
this.list.splice(index, 1);
}
}
})
</script>
到这里，Vue的基础指令以及基本使用也就差不多了，本文没有讲到的指令可以去Vue的官网上查看、学习框架建议多看多读官网的API，Vue官网的API文档还是比较全面的
结语：感谢您百忙之中点击查看这篇文章，希望你我共同进步
扫一扫
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
