vue的基本指令

 

1.创建vue对象

<script src="vue.js"></script>

var vm = new Vue({

    el:"#app",//挂载点，vue作用的范围只会在id为app的这个元素的内部

    data:{

        message:1824//定义当前组件所需要的一些状态，定义当前vue所需要的一些属性

    }

})

2.v-text

在vue当中我们可以直接访问data中的属性

1.v-text：

    底层原理主要是应用了在数据解析这块的innerText

eg：<h2 v-text="message"></h2>

2.v-text：

    值可以写任何js的表达式

eg：

<h2 v-text="1+1"></h2>

<h2 v-text="message.slice(1)"></h2>

<h2 v-text="message?123:456"></h2>

3.v-text：

    简写{{}}

区别：{{}}在页面第一次加载的时候会显示{{}}，而v-text不会

3.v-html

v-html：

    解析html，相当于innerHTML

    一般情况不会使用的，因为会有xss攻击，会通过这个在页面插入元素

eg：

<div v-html="p"></div>

4.v-show和v-if

1.v-show：底层是操作元素的display属性

    显示隐藏，用于非权限问题（选项卡，组件切换，动画）

    true：显示、

    false：隐藏（在页面上显示和隐藏）

eg：

<div class="box" v-show="flag">

    <input type="text">

</div>

2.v-if：底层是操控元素的创建和销毁

    显示隐藏，用于权限问题（比如后台管理系统，用户会员级别，登录和非登录）

    可以进行多个选择处理

    true：显示

    false：隐藏（所有元素创建销毁）

eg：

<div class="box" v-if="n==1">1111</div>

<div class="box" v-else-if="n==2">2222</div>

<div class="box" v-else>333</div>

5.v-for（数据的遍历）

1.可以遍历数组

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

2.可以遍历对象

eg：<li v-for="(val,key) in obj">{{val}}-----{{key}}</li>

3.可以遍历数组对象

eg：<li v-for="item in res">{{item.name}}</li>

4.可以遍历字符串

eg：<p v-for="item in str">{{item}}</p>

5.可以遍历数字

eg：<p v-for="item in 20">{{item}}</p>

6.v-on

1.v-on：

    进行事件的绑定：冒号后面是事件的名称，值为事件的函数

eg:

methods:{

    handle(){

        console.log(111)

    },

}//vue中所有的事件都需要放在methods中

2.语法：v-on：事件名称 =  事件函数

eg:<button v-on:click="handle()">点击</button>

3.简写：@事件名称

eg:<button @click="handle()">点击2</button>

7.修饰符

指令后面用.链接的属性叫做修饰符

.stop  阻止事件冒泡

.prevent  阻止浏览器默认事件

.once  事件只触发一次

.enter   回车

eg:

<div class="box" @contextmenu.prevent="menu()"></div>

<input type="text" @keydown.13="handlekeydown()">

8.事件对象

如果需要使用事件对象则需要传递一个$event

eg:

<div class="box" @click.once="handleBox($event,123)">

<div class="box1" @click.stop="handleBox1($event)"></div>

9.v-bind

1.绑定属性

2.简写   ：属性

3.语法： v-bind：属性 = 值

4.常见：title.class.id.alt.style.src.href

eg:

<div

    v-bind:title="title"

    v-bind:id="id"

    v-bind:class="className2"

    v-bind:alt="alt"

    :style="myStyle"

></div>

ps:true是拥有属性

    false是不拥有此属性

10.v-once

只绑定一次，数据的值只渲染一次

eg：<h2 v-once>{{message}}</h2>

11.v-pre

不解析vue的数据

eg：<div v-pre>v-pre他的作用不会解析{{message}}中的数据</div>

12.v-cloak

解决{{}}的第一次加载显示的问题

eg：

<h2 v-cloak>{{message}}</h2>

<style>

    [v-cloak]{

                display:none;

            }

</style>

13.v-model

 

1.可以用来实现双数据绑定

eg：

<input type="text" v-model="inputVal">

<p>{{inputVal}}</p>

2.这个指令只能给表单进行使用

eg：

<label>

男：<input type="radio" v-model="radioVal" value="男">

</label>

<label>

女：<input type="radio" v-model="radioVal" value="女">

</label>

<p>您选择的性别是:{{radioVal}}</p>

3.是根据表单的value值来去改变data中属性的值

eg：

<select v-model="selectVal">

<option value="1992">1992</option>

<option value="1993">1993</option>

<option value="1994">1994</option>

<option value="1995">1995</option>

<option value="1996">1996</option>

</select>

<p>您选择的年龄是：{{selectVal}}</p>

作用:如果表单上面加了v-model那么data中与表单绑定的那个属性就会随着表单的改变而改变

eg：

<label>

抽烟：<input type="checkbox" v-model="checkVal" value="抽烟">

</label>

<label>

喝酒：<input type="checkbox" v-model="checkVal" value="喝酒">

</label>

<label>

烫头：<input type="checkbox" v-model="checkVal" value="烫头">

</label>

<label>

大保健：<input type="checkbox" v-model="checkVal" value="大保健">

</label>

 

<p>您的爱好为:

 

<p v-for="item in checkVal">{{item}}</p>

</p>

14.面试题：

 

如何理解响应式原理？v-model的底层原理是什么？ 如果自己手动封装v-model?

var vm = new Vue({

el:"#app",

data:{

inputVal:"",

radioVal:"男",

checkVal:[],

selectVal:"1995"

},

methods:{

handleChange(e){

let val = e.target.value;

let flag = this.checkVal.includes(val);

 

if(flag){

var index = this.checkVal.indexOf(val);

this.checkVal.splice(index,1);

}else{

this.checkVal.push(val);

}

}

}

})

14.自定义指令（必须要在vue实例化之前创建）

全局创建：Vue.directive()

    参数1：指令名称

    参数2：指令实现的函数

        参数1：指令作用的元素 DOM元素

        参数2：指令的信息，是一个对象{value:表达式的结果,rawName:指令的全程,modifiers:修饰符}

eg1：

<div v-color="color" v-font="size">加油你们都是胖的</div>

Vue.directive("color", (el, { value }) => {

el.style.color = value;

})

eg2:

<div class="box" v-click="handleBox" v-hide.timeout>

<button v-click.s="handle">点击</button>

 

Vue.directive("font", (el, { value }) => {

el.style.fontSize = value;

})

 

Vue.directive("click",{

inserted(el,{value,modifiers}){

let {s} = modifiers

el.onclick = function(e){

if(s){

e.cancelBubble = true;

}

 

value();

}

}

})

 

 Vue.directive("hide", (el, { value, modifiers }) => {

 console.log(modifiers)

 let { timeout } = modifiers;

 console.log(timeout)

 if (timeout) {

 setTimeout(() => {

 el.style.display = "none";

 }, 2000)

 } else {

 el.style.display = "none";

 }

 

 })

 

局部创建：

directives：{

}