一切都建立在vue-cli 2.2 的脚手架工具里实现
文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变
<template>
<div>
<p>hello {{world}}</p>
<p v-text="'hello ' + world"></p>
<p>{{`hello ${world}`}}</p>
<p v-text="`hello ${world}`"></p>
<button @click="world='ziksang'">改变wrold值</button>
</div>
</template>
<script>
export default {
data () {
return {
world : "world"
}
}
}
</script>
- 第一种“Mustache” 语法（双大括号）写法
- 第二种 用v-text的指今写法
- 第三种和第四是对es6写法的拓展写法，称模板字符串
v-once
一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作
<template>
<div>
<p v-once>hello {{world}}</p>
<button @click="world='ziksang'">改变wrold值</button>
</div>
</template>
<script>
export default {
data () {
return {
world : "world"
}
}
}
</script>
纯文本
当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析
<template>
<div>
<p v-html='html'></p>
</div>
</template>
<script>
export default {
data () {
return {
html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`
}
}
}
</script>
属性
在组件中传递时需要用,其它元素上的绑定属性都需要这个功能
<template>
<div>
<a :href='href'>href</a>
<p :id='id'>id</p>
<button :disabled = 'disabled'>按钮</button>
</div>
</template>
<script>
export default {
data () {
return {
id : 2,
href : 'http://www.baidu.com',
src : 'https://cn.vuejs.org/images/logo.png',
disabled : true
}
}
}
</script>
不用：来绑定的属性可以直接属性赋值，如果一定要通过data数据选项中返回的值一定要加 ：
使用javascript表达式
在业务场景中一些方法判断或者简单的过滤，那我们可以用javascript表达式，能让代码更简洁，更清晰，比方说用一个三元表达式 。。。
<template>
<div>
<div id="method1">
<p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>
<button @click='count ++'>增加</button>
<button @click='count --'>减少</button>
</div>
<div id="method2">
<input type="text" v-model='message'>
<h1>{{ message.split('').reverse().join('') }}</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
count : 0,
message : ""
}
}
}
</script>
这是语句，不是表达式
{{ var a = 1 }}
流控制也不会生效，请使用三元表达式
{{ if (ok) { return message } }}
修饰赋
对于一些特殊的指令操作时需要，比方说对组件加事件，组织元素的默认行为，组织冒泡。。等等一系列，官方文档有详细解说每一个修饰赋的具体用途
首我们先对components文件夹中创建一个myButton组件
<template>
<button>按钮</button>
</template>
<script>
export default {
}
</script>
再在app.vue中写入
<template>
<div>
<my-button @click.native="buttonClick"></my-button>
</div>
</template>
<script>
import myButton from './components/myButton.vue'
export default {
components : {
myButton
},
methods : {
buttonClick () {
alert("原生点击")
}
}
}
</script>
正常的情况在一个单个组件内部自己使用v-on的事件，ok都不会有问题，如果在一个组件上定义一个指令事件，必须要用.native，这里大家一定要注意
** 我们用jquery的时候经常会遇到这种场景，当我们一个layer层弹出来的时候，内部是一个超过整个屏幕长度的滚动，当我们滑动layer的时候会导致里面的滚动也会一起滚动起来，这个是一件很操蛋的事，在网上也有着很多相关解决的办法，vue可以通过修饰符来解决这个问题
index.html文件中加一个视口度适配，更好的来查看效果 **
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
app.vue文件中
<template>
<div>
<ul>
<li v-for="item in list">
<h1>{{item}}</h1>
</li>
</ul>
<div @touchmove.prevent class="layer"></div>
</div>
</template>
<script>
import myButton from './components/myButton.vue'
export default {
data () {
return {
list : [1,2,3,4,5,6,7,8,9,10]
}
}
}
</script>
<style>
body,html {width:100%;height:100%}
h1{margin-top:10rem;}
.layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
</style>
我们会发当我们滑动layer层的，里面的滚动不会再滚动了，我们再试着把.prevent给去掉，会发现滚动再次出现，这个原理就是event.preventDefault来阻止默认事件事执行的
我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到
简单的例子
<template>
<div>
<input type="text" v-model.trim="content">
<input type="text" v-model = 'content'>
</div>
</template>
<script>
export default {
data () {
return {
content : ""
}
}
}
</script>
过滤器
过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示
在v-bind中也就是2.10的时候才支持这个功能
首先我们从后台拿到10个用户的手机，但是要把前7位掩码，做成*，然判断如果手机尾数是偶数的话，我们就显示已中奖，不是的话显示谢谢参与
<template>
<div>
<p v-for='tel in telephone'>{{tel | newtel}}</p>
</div>
</template>
<script>
export default {
data () {
return {
telephone : [
10000000000,
10000000001,
10000000002,
10000000003,
10000000004,
10000000005,
10000000006,
10000000007,
10000000008,
10000000009,
10000000000,
]
}
},
filters : {
newtel (value) {
if(!value) return ''
value = value.toString().substr(7,4)
value = '*'.repeat(7)+value
let endMember = value.substr(-1,1)
if(endMember % 2){
value = value+'中奖'
}else{
value = value+'谢谢参与'
}
return value
}
}
}
</script>
在filters选项里有个newtel的函数，value则是函数中固定的一个参数，代码过滤前的值，但最后在管道符里我们不用把这个固定的参数写在调用里面
es6新特性，repeat这个方法
结合过滤器参数与v-bind过滤
当后台传给很多链接的地址的时候，每个链接要带上不同的参数，比如https//www.baidu.com?user=ziksang&age=20
<template>
<div>
<a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
</div>
</template>
<script>
export default {
data () {
return {
urlList : [
{url : 'http://www.baidu.com',name :'ziksang',age : 20},
{url : 'http://www.google.com',name :'ziksang2',age : 30}
]
}
},
filters : {
getquery (value,name,age) {
if(!value) return ""
return `${value}?name=${name}&age=${age}`
}
}
}
</script>
在v-bind管道符中的getquery(第一个参,第二个参)
第一个参就是传给fitler里getquery里的第二个参数，就是name
第二个参就是传给fitler里getquery里的第三个参数，就是age
因为第一个参数是默认的
缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
