学习地址：
https://cn.vuejs.org/
首先引入vue.js;
之后实例化以下vue
var vm = new Vue({
el:
'#app',
data:{
message:'Hello Word',
selectIndex: -1,
meg: '<mark>hello vue!</mark>',
isShow: '
false'
,
value:'A',
arr: ['item1', 'item2', 'item3', 'item4'],
obj: { name: 'zhangsan', age: 40 },
str: 'dcwqnfeng'，
classVal：
'red'||'red yellow' ||['red', 'yellow']||{red: true,yellow:false,blue: true,green: true}||
[
'red'
, {yellow:
true
, green:
false
},
'blue'
],
styleVal: {
width:
'500px',
height:
'500px',
"background-color":
'red',
backgroundImage:
'url(https://cn.vuejs.org/images/logo.png)',
border:
'10px solid #666' }
},
methods: {
testAction:
function(...rest){
console.log(
this.message);
//rest即所有参数
console.log(
'参数：', ...rest);
},
itemAction(index){
console.log(
'点击了',index);
this.selectIndex = index;
}
}
})
1.指令:
给标签添加属性 v-<指令名字>="js表达式"
指令会根据标签的不同，添加不同的功能
(1).v-text:相当于innerTextinnerText
<p>例：v-text="message"=>
<span
v-text=
"message"
></span><p></p>
<p>例：v-text="1+2+3+message"=>
<span
v-text=
"1+2+3+message"
></span></p>
<p>简写：
<span
v-text=
"dd"
></span>=>
<span>{{message}}
</span></p>
v-text="message"相当于{{message}}
(2).v-html 功能相当于innerHtml
<div
v-html=
"meg"
></div>
(3).v-if
功能：通过控制标签是否存在在dom中来控制标签的显示
<div class="box" v-if="isShow">box</div>
<div class="box" v-if="value=='A'">box1-A</div>
<div class="box" v-else-if="value=='B'">box2-B</div>
<div class="box" v-else-if="value=='C'">box3-C</div>
<div class="box" v-else>box4-D</div>
(4). v-for 遍历的指令 数组的遍历：<li v-for="(value, i) in arr">{{value}}--{{i}}</li>
<li v-for="(value, i) in ['item1', 'item2', 'item3', 'item4']">{{value}}-------{{i}}</li>
对象的遍历： <li v-for="(v, k) in obj">{{v}}-----{{k}}</li>
<li v-for="value in obj">{{value}}</li>
<li v-for="(v, k) in {}">{{v}}-----{{k}}</li> 字符串的遍历：
<li v-for="item in str">{{item}}</li>
<li v-for="(item, index) in str">{{item}}-----{{index}}</li>
数字的遍历：
<li v-for="num in 10">
<li v-for="(num, index) in 10">
<li v-for="(num, index) in arr.length"> {{num}}------------{{index}} </li>
(5).
v-on指令：绑定事件。
1.以前的所有的事件都可以在vue中实现，写法发生了变化
2.方法的配置可以加()方便传参。事件对象需要通过$event传递。
也可以不加()，事件对象方法直接获得。
例：<button v-on:click="testAction()">按钮</button>
例：<button v-on:click="testAction">按钮3</button>
例：<div @:mousedovm.prevent="testAction($event) @contextmenu.stop.prevent="boxContextmenu"">按钮2</div>
例：
<button
v-on:click.stop.once=
"testAction('a', 'b', 'c', $event)"
>按钮1
</button>
.prevent修饰，阻止默认事件/.stop修饰，阻止事件冒泡/
.once修饰，事件只执行一次
(6).
v-bind：绑定属性.(
属性： src href id name type title alt ....
)
例子：<img v-bind:src="path">
简写：<img :src="path+'?where=super'">
class的绑定属性
例子：<div class="box" :class="classVal"></div>
style的绑定属性
<div
style=
"width: 500px; height: 500px;background-color: red; background-image: url(https://cn.vuejs.org/images/logo.png); border: 10px solid #666"
></div>
<div :
style=
"styleVal"
></div>
(7).bind-class练习
<li v-for="(item, index) in arr" :class="{active: selectIndex==index}" @click="itemAction(index)">{{item}}---{{index}}</li>
(8).v-model 专门绑定表单数据
<p>message:{{message}}</p> <input type="text" v-model="message">
(9).
自定义指令,在使用该指令的实例创建前声明指令:参数1：指令名字; 参数2:指令的实现函数
Vue.directive('hello', (el, info)=>{
// el: 指令所作用的元素
// info：指令相关的信息
console.log('hello指令调用了');
console.log(el, info);
el.innerHTML = info.value;
})
(10).自定义过滤器
语法：<any>{{表达式 | 过滤器}}</any>
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：
双花括号插值和 v-bind 表达式
(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
(11).v-pre 解析dom时，跳过这个标签，不解析这个标签中的所有内容，可以保留双花括号（
v-cloak、
v-test
） 例：
<p
v-pre
>{{你好！}}
</p>