Vue.j基础--语法说明（1）

VUE指令1.v-model双向绑定数据<input type="text" v-model="msg"/>   {{msg}} <!--取数据-->

<div id="app">
<input v-model='message'>
<p>{{message}}</p>
</div>
<script>
var obj = {
message: 'hello vue.js'
}
new Vue({
el: '#app',
data: obj
})
</script>

 2.v-for循环 

    <div id="box">
<ul>
<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#box',
data() {
return {
//rr:['module','views','controlle','aaaaa']
arr: [
{ "name": "xiaohong1", "age": 12 },
{ "name": "xiaohong2", "age": 12 },
{ "name": "xiaohong3", "age": 12 },
{ "name": "xiaohong4", "age": 12 }
]
}
}
})

或者

    <div id="box01">
<p v-for="item in arr">{{item}}</p>
</div>
<script>
new Vue({
el: '#box01',
data() {
return { arr: ['a', 'b', 'c', 'd'] }
}
})
</script>

3.v-show 显示与隐藏<div id="box"><div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div></div></body><script>new Vue({el: "#box",data(){return {show: true}}})</script>4.v-if显示与隐藏  （dom元素的插入与删除）<div id="box"><div style="width: 100px;height: 100px;background: black;" v-if="show"></div></div><script>new Vue({el: "#box",data(){return {show: true}}})</script>5.v-else<div id="box"><div style="width: 100px;height: 100px;background: black;" v-if="show"></div><div style="width: 300px;height: 300px;background: blue" v-else=""></div></div><script>new Vue({el: "#box",data(){return {show: true}}})</script>

6.v-else-if

<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>

关于v-if,v-else,v-else-if的区别，请参考  https://www.jianshu.com/p/8ecde5953465

7.v-bind，响应被绑定HTML的属性

<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">点击</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>

8.v-on 事件<div id="box"><!-- v-on --><button v-on:click="say">按钮</button><!--<button @click="say">按钮</button>--></div><script>new Vue({el: "#box",data(){return {}},methods: {say() {alert(111);}}})</script>9.v-text读取文本不能读取html标签<div id="box"><div v-text="msg"></div></div><script>new Vue({el: "#box",data(){return {msg:"11111"}},methods: {say() {                 alert(111);             }        }    })</script>10.v-html  能读取html标签<div id="box"><p v-text="msg"></p><p>{{msg}}</p><p v-html="msg"></p><p v-text="'今天是'+year+'年'+month+'月'"></p><p>今天是{{year}}年{{month}}月</p><p><span>姓名：{{person.name}}</span><span>年龄：{{person.age}}</span><span>性别：{{person.sex}}</span></p></div><script>new Vue({el:'#box',data:{msg:'<span>你好吗？</span>',year:new Date().getFullYear(),month:new Date().getMonth()+1,person:{name:'小明',age:18,sex:'男'}}})</script>v-text与v-html的区别：        v-text只会将内容以纯文本的方式输出；v-html会将HTML代码解析后在输出11.v-class 类名<style>.box{width: 400px;height: 100px;padding: 20px;}.active {background: #EF5656;}.fontColor {color: #F9F9F9;}</style><div id="example"><input type="checkbox" v-model="isShow" name="font"><label for="font">调整字体颜色-白色字体</label><div class="box" v-bind:class="{'active':isActive,'fontColor':isShow}">表示 active 这个 class 是否存在将取决于数据属性 isActive 的 值。</div></div><script>new Vue({el: '#example',data: {isActive: true,isShow: false}})</script>v-style  与v-class用法大致一样   总结

v-model   数据绑定
data  返回对象用 return
v-for   循环   格式  v-for="字段名 in(of) 数组json"
v-show   显示 隐藏     传递的值为布尔值  true  false  默认为false
v-if   显示与隐藏     和v-show对比的区别 就是是否删除dom节点   默认值为false
v-else-if  必须和v-if连用
v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
v-bind  动态绑定  作用： 及时对页面的数据进行更改
v-on 绑定事件  函数必须写在methods里面
@click  快捷方法
v-text  解析文本
v-html   解析html标签
v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'

文章出处：https://www.cnblogs.com/calledspeed001/p/7096755.html更多内容可借鉴：https://www.jianshu.com/p/98dfa4c6389c                         https://www.cnblogs.com/liuchuanfeng/p/6742631.html