Vue基本操作学习记录

Vue基本操作学习记录

#：id选择器
. ：calss选择器

Vue引入的基本步骤

1、导入开发版本的vue.js
2、创建Vue实例对象，设置el属性和data属性
3、使用模板语法把数据渲染到页面上

el：挂载点

vue实例作用范围：el选项命中的元素及其内部的后代元素

data：数据对象

vue中要用得数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型的数据时，遵循js的语法即可

Vue指令：以v-开头的一组特殊语法

1、内容绑定、事件绑定

v-text：设置标签的文本值（textContent）
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式

v-html：设置标签的innerHTML

	<div id="app">
		<p v-html="content"></p>
	</div>
	
	var app=new Vue({
		el:"#app"
		data:{
			content:"<a href='#'>xxxxx</a>"
		}
	})	

v-on：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

    <div id="app">
        <p v-html="content"></p>
        <input type="button" value="事件绑定"  @click="doit">
        <input type="button" value="事件绑定"  @mouseenter="doit">
        <input type="button" value="事件绑定"  v-on:click="doit">
        <h2 @click='change'>{{xxx}}</h2>
    </div>

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

    <script>   
        var app =new Vue({
            el:"#app",
            methods:{ 
                doit:function(){
                    alert("做IT");
                    //逻辑
                },
                change:function(){
                    this.xxx+="yyy"
                }
            },
            data:{
                xxx:"what",
                message:"HELLO VUE!",
                school:{
                    name:" "
                },
                content:"<a href='#'>xxxxx</a>"
            }
        })
    </script>

2、显示切换，属性绑定

v-show：根据表达值的真假，切换元素的显示和隐藏
原理是修改元素的display，实现隐藏显示
指令后面的内容最终都会解析成为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应的元素的显示状态会同步更新

    <div id='app'>
        <img src="./man.jpg" v-show='true'>
        <img src="./man.jpg" v-show='isShow'>
        <img src="./man.jpg" v-show='age>18'>
    </div>
    
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                isShow:true,
                age:25
            }
        })
    </script>
    

v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁切换的元素用v-show，反之使用v-if，前者的切换消耗小

    <div id="app">
        <p v-if="true">这是一个p标签</p>
        <p v-if="isShow">这是一个p标签</p>
        <p v-if="表达式">这是一个p标签</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true
            }

        })
    </script>

v-bind：设置元素的属性
v-bind：属性名=表达式

    <div id="app">
        <img v-bind:src="imgSrc" v-show='true'>
        <br>
        <img :src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!!!'">
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgSrc:"./women.jpg",
                imgTitle:"title"
            }

        }      
        )
    </script>

3、列表循环，表单元素绑定

v-for：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

    <div id="app">
        <ul>
            <li v-for="item in arr">测试：{{item}}</li>
        </ul>

        <ul>
            <li v-for="(item,index) in arr">{{index}}测试：{{item}}</li>
        </ul>

        <h2 v-for="item in food">{{item.name}}</h2>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                food:[
                    {name:"汉堡"},
                    {name:"三明治"},
                    {name:"饺子"}
                ]
            },

        })
    </script>

v-on补充：传递自定义参数，事件修饰符
事件绑定的方法写出函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制出发的按键为回车
事件修饰符有多种

    <div id="app">
        <input type="button" value="点击" @click="test">
        <input type="button" value="点击" @click="doIT(666,'老铁')">
        <input type="text" @keyup.enter="sayhi">
    </div>
    
	<script>
         var app = new Vue({
             el:"#app",
             methods:{
                 test:function(){
                     console.log("hello world");
                 },
                 doIT:function(p1,p2){
                     console.log("xxxxx");
                     console.log(p1);
                     console.log(p2);
                 },
                 sayhi:function(){
                     alert("吃了么")
                 }

             }
         })
     </script>

v-model：获取和设置表单元素的值（双向数据绑定）
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据——表单元素的值

    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
     <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"xxxxx"
            }
        })