el挂载点:
Vue实例的作用范围是什么?
*Vue会管理el命中的元素及其内部的后代元素
是否可以使用其他的选择器
可以使用其他的选择器,但是建议使用ID选择器
是否可以设置其他的dom元素呢?

  • 可以使用其他的双标签,不能使用HTML和BODY

data数据对象

  • Vue用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂数据类型是,遵守js的语法即可

本地应用
Vue指令
设置标签的文本值: v-text

<div id="app">
    <h2 v-text="message"盈></h2>        //yy
    <h2>{{message}}盈</h2>    //yy盈
</div>
var app=new Vue({
    el:"#app",
    data:{
        message:"yy"
    }
})

设置标签的InnerHTML:v-html

<div id="app">
    <p v-text="content"></p>        //<a href='[哔哩哔哩 (゜-゜)つロ 干杯~-bilibili](https://www.bilibili.com/)'>哔哩哔哩</a>
    <p v-html="content"></p>    //哔哩哔哩
</div>
var app=new Vue({
    el:"#app",
    data:{
        content:"<a href='[哔哩哔哩 (゜-゜)つロ 干杯~-bilibili](https://www.bilibili.com/)'>哔哩哔哩</a>"
    }
})

为元素绑定事件:v-on

<input type="button" value="事件绑定" v-on:click="方法名">
<input type="button" value="事件绑定" @click="方法名">

根据表达值的真假,切换元素的显示和隐藏:v-show
设置标签的文本值: v-text

<div id="app">
    <input type="button" value="切换显示状态" @click="changeisShow"/>
    <img src="地址" v-show="isShow">
    <img src="地址" v-show="age>=18">
    <input type="button" value="累加年龄" @click="addage"/>
</div>
var app=new Vue({
    el:"#app",
    data:{
        isShow:"true",
        age:15
    },
    methods:{
        changeisShow:function(){
            this.isShow= !this.isShow
        }
        addage:function(){
            this.age++;
        }
    }
})

1.v-show指令的作用是:根据真假切换元素的显示状态
2.原理是修改元素的display,实现显示隐藏
3.指令后面的内容,最终都会被解析成布尔值
4.值为true元素显示,值为false元素隐藏
5.数据改变之后,对应元素的显示状态会同步更新
注意,v-show 不支持 <template> 元素,也不支持 v-else

根据表达值的真假,切换元素的显示和隐藏(操纵dom元素):v-if

<div id="app">
    <input type="button" value="切换显示状态" @click="toggleisShow"/>
    <p v-if="isShow">somer 's by</p>
    <p v-show="isShow">somer 's by</p>
</div>
var app=new Vue({    el:"#app",    data:{        isShow:false    },    methods:{        toggleisShow:function(){            this.isShow= !this.isShow        }    }})

1.v-if指令的作用是:根据表达式的真假切换元素的显示状态。
2.本质是通过操纵dom元素来切换显示状态。
3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除
4.频繁的切换使用v-show,反之v-if,前者的切换消耗小。

设置元素的属性:v-bind

<style>.active{    border:1px solid red;}</style><div id="app">    <img v-bind:src="imgSrc">    <img v-bind:class="isActive?'active':''" @click="toggleisShow">//三元表达式    <img v-bind:class="{avtive:isActive}" @click="toggleisShow">//对象形式</div>
var app=new Vue({    el:"#app",    data:{        imgSrc:"URL",        isActive:false    },    methods:{    toggleisShow:function(){            this.isActive= !this.isActive        }    }})

1.v-bind指令的作用是:为元素绑定属性
2.完整的写法是v-bind:属性名。
3.简写的话可以直接省略v-bind,只保留:属性名。
4,需要动态的增删class建议使用对象的方式。

根据数据生成列表结构:v-for

<div id="app">    <ul>        <li v-for="(it,index) in arr"></li>        {{index+1}}{{it}}    </ul></div>
var app=new Vue({    el:"#app",    data:{        arr:["时","代","姐","妹","花"]    },})

1.v-for指令的作用是:根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是(item,index)in 数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上,是响应式的

获取和设置表单元素的值(双向数据绑定):v-model

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

1.v-model指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素相关联

最后修改:2021 年 12 月 11 日
如果觉得我的文章对你有用,请随意赞赏