什么是vue.js
官方说明：是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js的特性
- 1、MVVM模式
M: model 业务模型，用处：处理数据，提供数据
V: view 用户界面、用户视图
业务模型model中的数据发生改变的时候，用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。 - 2、组件化
- 3、指令系统
- 4、Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真实DOM，而不是虚拟DOM）
虚拟DOM可以提升页面的刷新速度。
安装vue.js
官网：https://cn.vuejs.org/v2/guide/installation.html
点击下载
点击开发版本将代码拷贝出来，放入新建的js文件中，就可以在自己的页面使用script标签引入啦
使用vue.js
Vue.js提供了一个vue对象，要使用vue.js 需要把它new出来
<script>new Vue({el:’#xxxx’,data:{}})</script>
el的作用是声明vue对象的作用边界，绑定上面dom标签的id
data的作用是存放显示在页面中的数据，在标签中以{{}}来获取。
我们知道vue是一个mvvm框架，前端的html页面相当于view，data对应的是后端的model，而我们new出来的vue对象则代表桥接前后端的view-model。也是整个mvvm框架的核心！
绑定文本data
下面是一个简单的hello world小栗子
举个栗子
运行页面显示hello world
绑定元素特性
不光可以绑定文本值，还可以对一些元素特性进行绑定 如：
<div id="app2" v-bind:title='message'>
<span>鼠标悬停触发</span>
</div>
Js文件：
let app2 = new Vue({
el:'#app2',
data:{
message:'hi~~ 平田君~~'
}
})
展示效果，是不是很方便啦
hi,又见面了平田君~~
这里的
v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。当然这个指令可以简写为“：”即
v-bind:title等效于:title
绑定函数
例如：
<div id="root">
<div v-on:click="handleClick" ><h1>{{content}}</h1></div>
</div>
Js：
let root = new Vue({
el : "#root",
data:{
content : "hello"
},
methods: {
handleClick: function(){
if(this.content === 'hello')
this.content = "world"
else
this.content = "hello"
}
}
})
这段代码通过v-on将鼠标点击事件click与vue函数handleclick绑定到一起，当发生鼠标点击事件的时候执行handleclick函数，将在hello 和 world之间来回切换
同样的v-on:click也可以简写为@click
双向绑定
<div id='shuru'>
<input :value="content"/>
<div>{{content}}</div>
</div>
单项属性绑定value的时候 输入东西content不发生变化
<div id='shuru'>
<input v-model="content"/>
<div>{{content}}</div>
</div>
使用v-model 可以实现双向绑定，效果如下，当输入框中数据发生变化的时候vue对象中data里的content属性也会跟着发生相应的变化。
计算属性
<div id='ex'>
<input v-model='one'/> +
<input v-model='two'/> =
{{sum}}
</div>
Js代码：
let ex = new Vue({
el:"#ex",
data:{
one : "",
two : "",
},
computed:{
sum : function(){
return Number(this.one) + Number(this.two)
}
}
})
通过computed将sum绑定到div，可以实现函数运算返回
侦听器
watch:{
sum : function(){
this.count++
}
}
使用watch可以对元素进行侦听，上面例子是对sum进行监听，当sum值发生变化的时候count进行自增，用来统计计算sum的次数
因为是即时计算，输入了5次也就说明计算了5次
条件与循环指令
控制一个元素的显示与否也是很简单的 我们可以使用v-if和v-show来做
我们变个戏法
<div id='root'>
<div v-if="show">{{count}}</div>
<button @click="oneTick">{{fashu}}</button>
</div>
Js代码：
let ex = new Vue({
el:"#root",
data:{
count:"戏法---->",
show:true,
fashu:"雾隐雷藏"
},
methods:{
oneTick:function(){
this.show = !this.show;
if(this.fashu==="雾隐雷藏")
this.fashu = "明心见性";
else if(this.fashu==="明心见性")
this.fashu = "雾隐雷藏";
}
}
})
消失了
效果可见我们给button绑定了一个点击事件，当触发事件的时候修改了上面div的show的值，当show为true的时候戏法----> 是显示状态当为false的时候就消失了，
同样的我们可以把
v-if变为v-show 得到的效果是一样的但是区别肯定会有的，让我们荡起双桨（啊呸。。。）打开控制台
当时
v-if的时候我们可以发现施展雾隐雷藏的时候会吧div删除掉，然后明心见性的时候再创建一个
而当v-show的时候则是增加一条css属性display:none，显示的时候再去掉。
至于开发中我们如何选择就看业务需求啦~~
循环指令是用v-for来实现的：
<div id="root1">
<ul>
<li v-for="tool of tools">{{tool}}</li>
</ul>
</div>
Js代码：
let ab = new Vue({
el:"#root1",
data:{
tools:["A","B","C"]
}
展示效果
<li>标签中也可以写为v-for="tool in tools"
另外在使用v-for的时候可以增加一个key的属性，可以提升页面的渲染速度，一个循环里的key是不可以重复的。
<li v-for="tool of tools" :key='tool'>{{tool}}</li>考虑到tool有可能是重复的，也可以用下面的方法
<li v-for="(tool ,index) of tools" :key='index'>{{tool}}</li>效果相同
总结
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
-
v-bind：指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性，v-bind:可以缩写为“：” -
v-on：指令用于给监听DOM事件，它的用语法和v-bind是类似的，v-on:可以缩写为“@” -
v-model：双向绑定 -
v-if：是条件渲染指令，它根据表达式的真假来删除和插入元素 -
v-show：也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。 -
v-else：可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
如果if指令为true，则else不会被渲染，如果show指令为true则else一样会渲染到html页面，不过是style为none -
v-for：基于一个数组渲染一个列表，它和JavaScript的遍历语法相似。
网友评论