0. 前言
在北京来说，vue.js比较受广大的公司欢迎，用的比较多，因为从vue.js官方文档就能看出来它的优点，易用，也就是简单实用的意思，灵活，渐进式的框架，那什么是渐进式框架？就好比给你一个空屋，通了煤水电网，有床够睡，需要什么自己添。它还有一大特点就是性能上，17kb min+gzip 运行大小，从数字就能看出来vue.js比较轻，轻量级的，还有就是超快的虚拟DOM，就是对复杂的文档DOM结构，进行最小化地DOM操作，好吧，看看今天要说的！！！
1. 简介
Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2. 代码实现
在学习一个新的框架的时候，第一个demo都是hello world，不要问我为什么，我也不知道，不是有句话说“世界上本来没有路，只是走的人多了，变成了路”，我感觉也就是用的人多了，渐渐的每个框架啊什么的第一个demo，也就成了第一个说明文档，所以今天，第一个我也来说一下hello world
1. hello world
HTML代码
<div id="app">{{msg}}</div>
JS代码
new Vue({
el:'#app',
data:{
msg:'hello world',
}
})
这只是一个简单的demo，当你学会它，离学会vue也就成功了一半了，
2. v-html
v-html指令，可以更新元素的innerHMT
这里稍微加一点难度，来一个比1+1=3还难的题，这里我想加入一个h1标签在hello里，怎么加？而且h1标签还是语义标签，要让它表现出来，正常情况下，你添加之后会是什么样的，是。。。
那怎么处理，就用到了v-html指令
HTML代码
<div id="app">
<div v-html="msg"></div>
{{address}}
</div>
JS代码
new Vue({
el:'#app',
data:{
msg:'<h1>hello</h1>',
address:"北京"
}
})
3. v-if
v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素
HTML代码
<div id="app">
<div v-if="flag">
今天有雾霾吗?
</div>
</div>
JS代码
new Vue({
el:'#app',
data:{
flag:true
}
})
那么，我们把flag的bool值改成false，会成什么样子的，当然会不显示了，那么我在这里就不在赘述了。
4. v-for
v-for 指令可以绑定数据到数组来渲染一个列表
HTML代码
<div id="app">
<ul>
<li v-for="(x,index) in list">
{{index+1}} {{x.name}} {{x.age}} {{x.address}} {{x.tel}}
</li>
</ul>
</div>
JS代码
new Vue({
el:'#app',
data:{
list:[
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
},
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
},
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
},
{
name:'test01',age:18,address:100,QQ:123456789,tel:33333333333
}
]
}
})
是不是觉得很方便啊
5. 赋值给变量
我们还可以将对象赋值给一个变量，用到的时候直接引用变量名
HTML代码
<div id="app">{{msg}}</div>
JS代码
var data = {
msg:'hello'
};
var vm = new Vue({
el:'#app',
data:data
});
6. v-on
用 v-on 指令监听 DOM 事件，还可以简写成@
HTML代码
<div id="app">
<p>{{msg}}</p>
<button v-on:click="clickme">点我</button>
</div>
JS代码
var vm = new Vue({
el:'#app',
data:{
msg:'tips'
},
methods:{
clickme:function(){
this.msg = new Date-0;
}
}
})
是不是该问我his.msg = new Date-0; 有谁知道后面Date-0是什么意思呢？
把毫秒数转换成数字，然后你把她改成@click也可以，也能实现同样的效果
7. v-bind
v-bind 主要用于属性绑定，如 :src :class :style 属性绑定
HTML代码
<div id="app">
</div>
JS代码
new Vue({
el:'#app',
data:{
src:'1.jpg'
}
})
当然v-bind也能简写，简写成 : 就可以了
v-bind绑定style
HTML代码
<div id="app">
<div :style="{'backgroundColor':bgc,'font-size':fs+'px'}">aaaaa</div>
</div>
new Vue({
el : '#app',
data : {
bgc : '#dfdfdf',
fs : 30
}
})
v-bind还可以绑定对象和数组
HTML代码
<div id="app">
<div :class="{clzA:a,clzB:b}">aaaa</div>
</div>
JS代码
new Vue({
el : '#app',
data : {
a : true,
b : false
}
})
上面的a和b代表键值对里的key，key是一个样式class，而value是boolean类型的值。
绑定数组类型
CSS代码
.clzA{
color:red;
}
.clzA{
background-color:green;
}
HTML代码
<div id="app">
<div :class="[a,b]">aaaa</div>
</div>
JS代码
new Vue({
el : '#app',
data : {
a : 'clzA',
b : 'clzB',
}
})
8. v-model
v-model的指令能使数据双向数据绑定
这里我们直接写一个demo，里面有两个输入框，实现在输入框输入，输入两个输入框的值的乘积，唉，整的跟绕口令是的，哈哈
HTML代码
<div id="app">
<input v-model="price" placeholder="price">
<input v-model="number" placeholder="number">
<p>{{total}}</p>
</div>
JS代码
new Vue({
el:'#app',
data:{
number:15,
price:3.29
},
computed:{
total:function(){
return this.number*this.price
}
}
})
computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同时会出发实时计算
9. 阻止冒泡，默认行为
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。在vue里面，有的时候我们也需要阻止冒泡还有默认行为，那么看看它们是怎么实现的呢？
阻止冒泡
CSS代码
.bdr{
border: 3px solid blue;
padding: 10px;
}
HTML代码
<div id="app">
<div class="bdr" @click="outter">
outter
<div class="bdr" @click="middle">
middle
<div class="bdr" @click="inner">
inner
</div>
</div>
</div>
</div>
JS代码
new Vue({
el : '#app',
methods : {
inner : function () {
alert ('inner')
},
middle : function () {
alert ('midder')
},
outter : function () {
alert ('outter')
}
}
})
不阻止冒泡的时候是这样的，那么我们阻止了之后呢？在HTML中inner的div中 @click.stop="inner"这样写，就阻止了冒泡
你看是不是就弹出来一次
阻止默认行为
HTML代码
<div id="app">
<a href="http://www.baidu.com" @click="clk">百度</a>
</div>
JS代码
new Vue({
el : '#app',
methods : {
clk : function () {
alert ('百度')
}
}
})
这是没有阻止默认行为的，下面我们就来一个阻止默认行为的，写法同上，@click.prevent="clk"，主要看效果
这是阻止默认行为之后的效果
10. 组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。
要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如：
Vue.component('my-component', {
// 选项
})
对于自定义标签名，Vue.js 不强制要求遵循 W3C规则 （小写，并且包含一个短杠），尽管遵循这个规则比较好。
HTML代码
<div id="app">
<my-component></my-component>
</div>
JS代码
Vue.component('my-component',{
template:'<div>A custom {{msg}}!</div>',
data:function () {
return{
msg:'hello'
}
}
})
new Vue({
el : '#app'
})
上面的是全局组件，组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。当然还有一种局部组件
局部组件
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
HTML代码
<div id="app">
<my-component></my-component>
</div>
JS代码
new Vue({
el:'#app',
components: {
// <my-component> 将只在父模板可用
'my-component': {
template: '<div>A custom {{msg}}!</div>',
data:function(){
return {
msg:'hello'
}
}
}
}
})
11. 使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”
HTML代码
<div id="app">
<my-component msg="hello"></my-component>
</div>
JS代码
Vue.component('my-component',{
props:['msg'],
template:'<div>A custom {{msg}}!</div>'
})
new Vue({
el : '#app'
})
12. 动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
HTML代码
<div id="app">
<input type="text" v-model="parentMsg">
<my-component :msg="parentMsg"></my-component>
</div>
JS代码
Vue.component('my-component',{
props:['msg'],
template:'<div>A custom {{msg}}!</div>'
})
new Vue({
el : '#app',
data : {
parentMsg : 'hello'
}
})
3. 结束语
希望我写的东西对读者老爷们有所帮助，喜欢的点赞啊！！！
