文章目录
0. vue基本格式
<script>
var vue = new Vue({
el: "父元素的选择器",
data: {
属性1: 属性值,
属性2: 属性值
},
methods: {
函数名1: function() {
},
函数名2: function() {
}
},
vue生命周期函数名: function() {
}
})
</script>
1. 单向绑定 - { {属性名}}
<body>
<div id="vueBox">
<p>{
{name}}</p>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
name: "lrc"
}
})
</script>
2. 双向绑定 - v-model=“属性名”
<input type="number" v-model.number="data属性名"/>
2.1 input绑定 - text
<body>
<div id="vueBox">
<p>姓名:{
{name}}</p>
<input name="test" type="text" v-model="name"/>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
name: ""
}
})
</script>
2.2 textarea绑定
<body>
<div id="vueBox">
<p>姓名:{
{name}}</p>
<textarea cols="10" rows="10" v-model="name"></textarea>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
name: ""
}
})
</script>
2.3 input绑定 - checkbox
2.3.1 多个checkbox - 即多选
属性绑定是数组
<body>
<div id="vueBox">
<p>爱好:{
{hobby.toString()}}</p>
<input type="checkbox" value="1" v-model="hobby">
<span>篮球</span>
<br>
<input type="checkbox" value="2" v-model="hobby">
<span>排球</span>
<br>
<input type="checkbox" value="3" v-model="hobby">
<span>足球</span>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
hobby: []
}
})
</script>
2.3.2 单个checkbox - 即单选
属性绑定可以是布尔数值
<body>
<div id="vueBox">
<p>爱好:{
{hobby}}</p>
<input type="checkbox" value="1" v-model="hobby">
<span>篮球</span>
<br>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
hobby: true
}
})
</script>
2.4 input绑定 - radio
不可v-model绑定的值不可以是boolean数值
<body>
<div id="vueBox">
<p>爱好:{
{hobby}}</p>
<input name="hobby" type="radio" value="1" v-model="hobby"></input>
<label >篮球</label><br/>
<input name="hobby" type="radio" value="2" v-model="hobby"></input>
<label>排球</label><br/>
<input name="hobby" type="radio" value="3" v-model="hobby"></input>
<label>足球</label><br/>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
hobby: 3
}
})
</script>
2.5 select-option绑定
单选
<body>
<div id="vueBox">
爱好:<span v-text="hobby"></span>
<br/>
<select v-model="hobby">
<option value="1">篮球</option>
<option value="2">足球</option>
<option value="3">排球</option>
</select>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
hobby: 3
}
})
</script>
多选
<body>
<div id="vueBox">
爱好:<span v-text="hobby.toString()"></span>
<br/>
<select v-model="hobby" multiple="multiple">
<option value="1">篮球</option>
<option value="2">足球</option>
<option value="3">排球</option>
</select>
</div>
</body>
<script>
var vue = new Vue({
el: "#vueBox",
data: {
hobby: []
}
})
</script>
3. 内容填充v-text、v-html、v-pre
<body>
<div id="app">
<div v-text="text"></div>
<br/>
<div v-html="html"></div>
</div>
</body>
<script>
var vue = new Vue({
el : "#app",
data: {
text: "<a href='http://baidu.com'>点这里,你懂得!</a>",
html: "<a href='http://baidu.com'>点这里,你懂得!</a>"
}
})
</script>
<body>
<div id="vueBox">
<p v-pre>{
{name}}</p>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
name: "lrc"
}
})
</script>
4. 解决闪动现象 - v-cloak
{ {name}}
**原因:当vue渲染数据时,先使用{ {name}}这个字符显示在浏览器中,然后在快速的替换这个字符为data绑定的值,如果计算机比较卡的话,会有非常明显的闪烁现象 - 使用v-cloak指令进行解决该闪烁现象**
原理:先通过样式隐藏内容,内存把值绑定好,在通过样式进行显示
<head>
<meta charset="UTF-8">
<title>Vue测试</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vueBox">
<p v-cloak>{
{name}}</p>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
name: "lrc"
}
})
</script>