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