蚊子的vue笔记 - 基础知识--指令

vue基础语法知识整理

建立html文件，并引入vue的js，如：

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

声明:
var vm = new Vue({…}} 固定写法，放在script标签内
el：表示需要渲染的标签标识
data：需要渲染的数据

		<script>
		    var vm = new Vue({
		        el: '#app',
		        data: {
		            name:'mone',
                    age:18,
                    msg:'我要写的信息',
                    src:'./images/demo_pic.jpg',
                    id:5,
                    isadd:false
		        }
		    })
		</script>

插值表达式

        <div id="app">
            <!-- 普通展示数据 -->
	            <p>{{name}}</p>
	            <!-- 拼接字符串:字符串要包含在''之内 -->
	            <p>{{name+'你好'}}</p>
	            <p>{{age+10}}</p>
	            <!-- 三元表达式 -->
	            <p>{{age>18?'成年':'未成年'}}</p>
	            <!-- 添加if--else:不能直接添加逻辑结构 -->
	            <!-- <p>{{if(age>18){'成年'}else{ '未成年'}}}</p> -->
        </div>

v-text: 这是一个属性，所以要放置在标签属性的位置，添加后不再使用插值表达式{{ }}

		<div id="app">
            <p>{{msg}}</p>
            <!-- 使用v-text:它是一个指令，而指令是属性，所以在标签属性位置添加，指令不再添加{{}}-->
            <p v-text='msg'></p>
        </div>

v-bind：
v-bind可以用简写方式，如“:src”等于“v-bind:src”

		<div id="app">
            <p>{{name}}</p>
            <!-- v-bind:说明:后面的属性需要绑定data中的某个数据 -->
            <img v-bind:src="src" alt="">
            <!-- 简写方式 :就代表动态绑定-->
            <img :src="src" alt="">
            <a :href="'/del?id='+id">删除</a>
            <p :class="{'blueFont':isadd}">isadd为true的时候文字是蓝色的</p>
            <!-- 如果一个属性值是变化的，就可以考虑使用动态绑定
                 任意的属性都可以动态绑定 -->
        </div>

v-for

		<div id="app">
            <ul>
                <!-- 想循环动态生成哪个结构，就在这个结构中添加v-for指令 -->
                <li v-for='(value,index) in arr'>{{index}} : {{value}}</li>
                <!-- <li v-for='value in arr' v-text='value'></li> -->
            </ul>
            <ul>
                <!-- 第一个是value -->
                <!-- :key:它可以唯一的标识某个数据，在数据进行变化的时候，只会动态的更新这一条数据，意味着可以提高页面的加载和刷新的效率 -->
                <li v-for='(value,key,index) in student' :key='key'>{{index}} : {{key}} : {{value}}</li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    // 注意事项：
                    // 1.如果是通过数组的length属性修改数组的长度，那么页面中的数据不会动态刷新
                    // 2.如果是通过数组的下标来修改数组中的元素值，页面中的数据也不会自动的刷新

                    // 解决方式：
                    // 使用：Vue.set(源数组，索引，新值)
                    // 如果修改长度，可以使用数组的方式，如splice
                    arr:[1,2,3,4,5,6,7],
                    student:{
                        name:'mone',
                        age:20,
                        gender:true,
                        email:'lwenzi@mone.com',
                        gfc:20
                    }
                }
            })
        </script>

v-model:令data数据和页面输入框内容做双向绑定

		<div id="app">
            <!-- v-model支持的元素类型：input/select/textarea -->
            <!-- <input type="text" :value="msg"> -->
            <!-- v-model:可以实现双向数据绑定：
            1.如果修改model中的数据，view中的数据会发生改变
            2.如果修改view中的数据，model中的数据也会发生改变 -->
            <input type="text" v-model='msg'>
            <input type="button" value='提交'>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'随便来个值'
                }
            })
        </script>

v-on:

		<div id="app">
	            <input type="text" v-model='msg'>
	            <input type="button" value='提交' v-on:click='showMsg'>
	            <!-- 简写方式 -->
	            <!-- 1.就算没有显式的传递参数，那么事件触发的时候也会将当前事件源参数做为参数传递,但是如果只是显式的传递了自定义的参数，那么事件源参数就不再自动传递
	            2. $event就是当前的事件源参数 ，名字绝对不能改 -->
	            <input type="button" value='提交' @click='showMsg(123,$event)'>
	            <!-- 事件名称.prevent:阻止当前元素的默认行为 -->
	            <a href="http://baidu.com" @click.prevent='sayHi'>点我点我！</a>
	            <!-- 键修饰符，键别名   键修饰符，键代码  -->
	            <!-- <input type="text" name='username' v-model='username' @keyup.enter='showname'> -->
	            <input type="text" name='username' v-model='username' @keyup.13='showname'>
	            <!-- 对象语法 -->
	            <input type="button" value="我可绑定了多个事件^_^" v-on='{ mousedown: doThis, mouseup: doThat}'>
	        </div>
	        <script>
	            var vm = new Vue({
	                el: '#app',
	                data: {
	                    msg:'随便来个值',
	                    username:'jack'
	                },
	                // 方法（包含事件处理函数）都可以在methods中定义，它是一个单独的成员.它是一个对象
	                methods:{
	                    // showMsg:function(){}
	                    // showMsg:() => {}
	                    showMsg(v,k){
	                        // alert(vm.msg)
	                        // this就是当前的vm,this就是是指向当前的Vue实例
	                        // 这个this在所有vue实例的成员中都能获取到
	                        console.log(v)
	                        console.log(k)
	                    },
	                    sayHi(){
	                        alert('hello')
	                    },
	                    showname(){
	                        alert(this.username)
	                    },
	                    doThis(){
	                        console.log('doThis')
	                    },
	                    doThat(){
	                        console.log('doThat')
	                    }
	                }
	            })
	        </script>

v-if和v-show:

        <div id="app">
            <!-- v-show='isShow':v-show是通过样式来控制元素是否显示或隐藏，意味着他是操作样式 -->
            <p v-show='isShow'>我是v-show</p>
            <!--  v-if='isShow':是控制当前元素是否创建，意味着他是操作dom-->
            <p v-if='isShow'>我是v-if</p>

            <!-- 使用场景
            1.如果是大量的操作dom,建议v-show，避免反复的创建dom结构
            2.如果是异步渲染，加载新的数据，建议使用v-if,避免渲染多余的dom结构 -->
			<span>成绩:</span>
			<p v-if='score>=90'>A</p>
            <p v-else-if='score>=80'>B</p>
            <p v-else-if='score>=70'>C</p>
            <p v-else-if='score>=60'>D</p>
            <p v-else>E</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    isShow:true,
                    score: 90 
                }
            })
        </script>

v-cloak:待vue编译完成后去除隐藏的样式，避免用户看见未被编译的代码

		<style>
            [v-cloak]{
                display: none
            }
        </style>
		<div id="app">
            <!-- 添加了这个v-cloak指令的元素在未编译完成之前是隐藏的，如果编译完成。这个指令会自动的消失 -->
            <p v-cloak>{{msg}}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'能不能看到我闪亮一下'
                }
            })
        </script>