版本：(2.6.14)
创建 Vue 实例
每个 Vue 实例都是通过 Vue() 函数创建的。
var vm = new Vue({
// 选项
})
当Vue实例被创建时，会将 data 属性对象中的 property 加入到 Vue 的响应式系统中，这些数据改变时，视图会被重新渲染。如果是在实例创建后新增的属性，其值发生变化时视图不会重新渲染。
vm.msg='message!'
可以使用 Object.freeze() 方法将某个属性从响应系统中排除。
显示变量 {{ }}
<body>
<div id="app">
<p>{{message}}</p>
<p>{{message + "!"}}</p>
<p v-once>{{message}}</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message : "Vue Demo"
}
})
</script>
</body>
v-once 改变值后页面也不会更新。
显示HTML内容 v-html
<body>
<div id="app">
<p>{{message}}</p>
<p v-text="message"></p>
<p v-html="message"></p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message : "<font color='red'>Vue Demo</font>"
}
});
</script>
</body>
v-bind 属性绑定
<body>
<div id="app">
<p v-bind:title="message">使用v-bind设置属性</p>
<p v-bind:title="'Tip: ' + (1 + num)">支持表达式运算</p>
<p :title="message">使用缩写</p>
<p v-bind:title="boolTrue">使用boolean类型true</p>
<p v-bind:title="boolFalse">使用boolean类型false，将不会有title属性</p>
<p v-bind:title="boolString">使用字符串false</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message : "Vue Demo",
num: 10,
boolTrue: true,
boolFalse: false,
boolString: "false"
}
});
</script>
</body>
分支 v-if & v-else & v-if-else
v-if 条件不满足时，DOM结构中将不存在该标签。
<body>
<div id="app">
<p v-if="gender === 'M'">男</p>
<p v-else-if="gender === 'W'">女</p>
<p v-else>未知</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
gender: "0"
}
});
</script>
</body>
指令 v-show
与 v-if 是不同的，v-show 是通过设置标签的样式 display 来控制是否显示的。
<body>
<div id="app">
<p v-show="color === 'red'" style="color: red;">红色</p>
<p v-show="color === 'blue'" style="color: blue;">蓝色</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
color: "red"
}
});
</script>
</body>
遍历数组 v-for
<body>
<div id="app">
<!-- 遍历数组 -->
<p v-for="article in articles">
{{article.title}} ----- {{article.author}}
</p>
<!-- 遍历数组，使用第二个参数 -->
<p v-for="(article, index) in articles">
{{index}} ----- {{article.title}} ----- {{article.author}}
</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
articles: [
{title: "VUE", author: "vue"},
{title: "JAVA", author: "java"},
{title: "PHP", author: "php"}
]
}
});
</script>
</body>
你也可以用 of 替代 in 作为分隔符
遍历对象属性 v-for
<body>
<div id="app">
<p v-for="(value) in user">
{{value}}
</p>
<p v-for="(value, name) in user">
{{name}} : {{value}}
</p>
<p v-for="(value, name, index) in user">
{{index}} - {{name}} : {{value}}
</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
user: {
name: "姓名1",
gender: "男",
age: 21
}
}
});
</script>
</body>
数据绑定 v-model
<body>
<div id="app">
<form>
标题: <input type="text" name="title" v-model="article.title" /> - {{article.title}}
<br />
作者: <input type="text" name="author" v-model="article.author" /> - {{article.author}}
<br />
简介：<input type="text" name="profile" v-model="article.profile" /> - {{article.profile}}
<br />
性别:
<input type="radio" name="gender" value="M" v-model="user.gender" >男</input>
<input type="radio" name="gender" value="W" v-model="user.gender" >女</input>
- {{user.gender}}
<br />
爱好：
<input type="checkbox" name="hobby" value="1" v-model="user.hobby">你懂得1</input>
<input type="checkbox" name="hobby" value="2" v-model="user.hobby">你懂得2</input>
<input type="checkbox" name="hobby" value="3" v-model="user.hobby">你懂得3</input>
- {{user.hobby}}
<br />
性别: <select name="gender" v-model="user.gender">
<option value="0">未知</option>
<option value="M">男</option>
<option value="W">女</option>
</select> - {{user.gender}}
</form>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
article: {
title: "文章标题",
author: "文章作者"
},
user: {
gender: '',
hobby: []
}
}
});
</script>
</body>
