vue.js学习笔记

1.绑定DOM元素(v-bind)
v-bind:DOM元素="data里的字符名"


html:
<div id="app-2">
 <span v-bind:title="message">
   鼠标悬停几秒钟查看此处动态绑定的提示信息！
 </span>
</div>


js:
var app2 = new Vue({
 el: '#app-2',
 data: {
   message: '页面加载于 ' + new Date()
 }
})


2.条件语句(v-if)
v-if="data里的字符名",当data里的字符名为true时显示，false隐藏


html:
<div id="app-3">
 <p v-if="seen">现在你看到我了</p>
</div>


js:
var app3 = new Vue({
 el: '#app-3',
 data: {
   seen: true
 }
})


3.循环语句(v-for)
html:
<div id="app-4">
 <ol>
   <li v-for="todo in todos">
     {{ todo.text }}
   </li>
 </ol>
</div>


js:
var app4 = new Vue({
 el: '#app-4',
 data: {
   todos: [
     { text: '学习 JavaScript' },
     { text: '学习 Vue' },
     { text: '整个牛项目' }
   ]
 }
})


4.事件绑定(v-on)

v-on:事件名="函数名"    在js中将函数名放于methods中


html:
<div id="app-5">
 <p>{{ message }}</p>
 <button v-on:click="reverseMessage">逆转消息</button>
</div>


js:
var app5 = new Vue({
 el: '#app-5',
 data: {
   message: 'Hello Vue.js!'
 },
 methods: {
   reverseMessage: function () {
     this.message = this.message.split('').reverse().join('')
   }
 }
})


5.双向绑定(v-model)

v-model="和上面相同的字符名"


html:
<div id="app-6">
 <p>{{ message }}</p>
 <input v-model="message">
</div>


js:
var app6 = new Vue({
 el: '#app-6',
 data: {
   message: 'Hello Vue!'
 }
})


6.vue实例都会代理其data对象里所有的属性，就是vue实例和data对象里所有属性相同，各自随之变化。
js:
var data = { a: 1 }
var vm = new Vue({
 data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
7.文本
(1)数据绑定最常见的形式是使用{{}}的文本插值


html:
<div id="demo">{{msg}}</div>


js:
data:{
msg:"hello vue"
}


{{msg}}将会被替代为对应数据对象上 msg 属性的值。无论何时，data里的 msg 属性发生了改变，插值处{{}}的内容都会更新。


(2) 通过使用 v-once指令，当data里的值改变时，插值处{{}}里的内容将不会改变
html:
<div id="demo">{{msg}}</div>


js:
data:{
msg:"hello vue"
}
网页上显示的是hello vue


当<div id="demo">{{msg}}</div>添加上v-once
 <div id="demo" v-once>{{msg}}</div>


js:
data:{
msg:"hello vue111"
}
网页上仍然显示的是hello vue


8.纯HTML
{{}}会将数据解释为纯文本,而非HTML.为了输出真正HTML，需要使用指令v-html
html:
<div v-html="<p>hello</p>"></div>
9.v-bind
HTML的属性不能在{{}}中使用，应该使用v-bind


html:
<div v-bind:id="dynamicId"></div>
<div v-bind:title="contact"></div>
10.js表达式
vue支持js的表达式,
如：{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}


但是只支持单个表达式，复杂的表达式无效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}


11.指令缩写
(1)v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
(2)v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
12.计算属性（computed）
基础例子：
html:
<div id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>


js:
var vm = new Vue({
 el: '#example',
 data: {
   message: 'Hello'
 },
 computed: {
   // a computed getter
   reversedMessage: function () {
     // `this` points to the vm instance
     return this.message.split('').reverse().join('')
   }
 }
})


结果：
Original message: "Hello"
Computed reversed message: "olleH"
13.计算属性computed  VS   methods
用methods可以达到计算属性相同的功能，但是methods没有缓存，而计算属性有缓存，每次调用的时候从缓存里使用就行。如果不希望使用缓存，就使用methods


14.表单控件绑定(数据双向绑定)
(1)文本
html:
<div id="demo">
<input v-model="message" placeholder="edit me">
<p>
Message is {{message}}
</p>
</div>
js:
var app=new Vue({
el:'#demo',

})


(2)多行文本
html:
<div id="demo">
<span>Multiline message is:</span>
<p>
{{message}}
</p>
<br>
<textarea v-model="message"></textarea>
</div>


js:
new Vue({
el:'#demo'
})


(3)单个勾选框，勾选为true,否则为false
html:
<div id="demo">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
js:
new Vue({
el:"#demo",
})