引入Vue.js

  1. 下载js文件后引入

    1
    <script type="text/javascript" src="js/vue.js"></script>
  2. 使用CDN方法

    开发环境版本

    1
    2
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    生产环境版本

    1
    2
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

HTML代码

1
2
3
4
5
<div id="app1">
<p v-bind:style="flag?'color:blue':'color:red'">{{message}}</p>
<input type="text" v-model="message">
<button v-on:click="modifyColor">改变p的颜色</button>
</div>

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
new Vue({
el: '#app1',
data: {
message: 'Hello Vue!!',
flag: true
},
methods: {
modifyColor: function () {
if (this.flag) {
this.flag = false;
} else {
this.flag = true;
}
}
}
})
</script>

结果

改变输入框内容,上面的文本也随之改变,点击按钮文本的颜色由蓝色和红色来回变换

img

小结

data 用于定义属性

methods 用于定义的函数,可以通过 return 来返回函数值

{ { } } 于输出对象属性和函数返回值

el 用于绑定某个id的标签

v-on:click 触发某个点击事件

v-model 动态绑定某个属性的值

v-bind 用于绑定HTML属性