引入Vue.js
首先要引入 Vue.js 文件
可以使用 cdn 或者是下载到本地
使用方法
<div class="box"> <a v-bind:href="url">百度</a> </div>
<script type="text/javascript">
new Vue({
el : '.box',
data : {
url : 'https://www.baidu.com/'
},
methods : {
hW : function () {
return 'helloWorld';
}
}
})
</script>
先 new Vue()
可以看到在 Vue 构造器中有一个el 参数，它是用来选中 dom 元素
data 用于定义属性
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
vue指令语法：
v-指令名字+:+指令参数=指令的表达式
例如上面的
<a v-bind:href="url">百度</a>
小练习：
输出一个电影的信息
<div id="move" v-bind:title="moveActor">
电影名称 ： {{moveName}}
<br />
上映时间 ：{{moveDate}}
<br />
这是一部 : {{isNew()}}电影
<br />
</div>
<script type="text/javascript">
new Vue({
el : '#move',
data : {
moveName : '复仇联盟者3',
moveDate : '1999年',
moveActor : '你/我/它/他/她'
},
methods : {
isNew : function () {
return parseInt(this.moveDate) > 2000 ? '新' : '老';
}
}
})
</script>