Vue基础之必备指令

素颜马尾好姑娘i 2022-11-25 13:30 158阅读 0赞

**Vue是什么？**

*  vue 是一套用于构建用户界面的渐进式框架，vue核心库只关注视图层，不仅易上手还便于与第三方库或既有项目的整合
 *  `指令：本质就是属性，Vue中以v-开头的属性就是指令`
 *  **v-clooak** 防止页面加载时出现闪烁问题  
    v-clooak的使用
    
        <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性v-cloak的标签让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style>
          <body>
        	<div id="app">
        		<div v-cloak >{
             {msg}}</div>
        	/*让带有插值愈发的添加  v-cloak 在数据渲染完成之后，
        	v-cloak属性会被自动去除  v-cloak一旦移除也就是没有这个属性了，
        	属性选择器就选择不到该标签也就是对应的标签会变为可见 */
        	</div>
        	//引入vue文件
        	<script src="js/vue.js"></script>
        	<script> var vm = new Vue({ //el指定元素 id 是 app 的元素 el: '#app', //data里面存储的是数据 data: { msg: 'Hello Vue' } }); </script>
          </body>
 *  **v-text**  
    `1. v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题`  
    `2. 如果数据中有HTML标签会将html标签一并输出`  
    `3.注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值`  
    v-text的使用
    
        <div id="app">
        	**
        	
        	 <p v-text="msg"></p>
        	 
        	 <p>{
             {msg}}</p>
        </div>
        <script src="./js/vue.js"></script>
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>
 *  **v-html**  
    `1. 用法和v-text 相似 但是他可以将HTML片段填充到标签中`  
    `2. 可能有安全问题，一般只在信任的内容上使用v-html，永远不用在用户提交的内容上`  
    `3. 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。`
    
        <div id="app">
        	
        	<p v-html="html"></p>
        	
        	<p>{
             {message}}</p>
        	
        	<p v-text="text"></p>
        </div>
        <script src="./js/vue.js"></script>
        <script> let app = new Vue({ el: "#app", data: { message: "<span>通过双括号绑定</span>", 　 html: "<span>html标签在渲染的时候被解析</span>", 　　text: "<span>html标签在渲染的时候被源码输出</span>", 　} }); </script>
 *  **v-pre**  
    `1. 显示原始信息跳过编译过程`  
    `2. 跳过这个元素和它的子元素的编译过程。`  
    `3. 一些静态的内容不需要编译加这个指令可以加快渲染`
    
        <div id="app">
        	 <span v-pre>{
             { this will not be compiled }}</span> 
        	 
        	 <span v-pre>{
             {msg}}</span>   
        	 
        </div>
        <script src="./js/vue.js"></script>
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>
 *  **v-once**  
    `执行一次性的插值【当数据改变时，插值处的内容不会继续更新】`
    
        <div id="app">
        
        	  <span v-once>{
             { msg}}</span> 
        </div>
        <script src="./js/vue.js"></script>
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>
 *  **双向数据绑定**  
    `1. 当数据发生变化的时候，视图也就发生变化`  
    `2. 当视图发生改变的时候，数据也会跟着同步变化`
 *  **v-model**  
    `v-model 是一个指令，限制在 <input>、<select>、<textarea>、components中使用`
    
        <div id="app">
              <div>{
             {msg}}</div>
              <div>
                 
                <input type="text" v-model='msg'>
              </div>
        </div>
        <script src="./js/vue.js"></script>
        <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>
 *  **v-on**  
    `用来绑定事件的: 形式如：v-on:click 缩写为 @click`
    
        <div id="app">
              <div>{
             {num}}</div>
              <div>
              		
              		<button v-on:click='num++'>点击1</button>
              		<button @click='num++'>点击2</button>
              </div>
        </div>
        <script src="./js/vue.js"></script>
        <script> new Vue({ el: '#app', data: { num:1 } }); </script>
    
     *  **v-on事件函数中传入参数**
    
        <div id="app">
              <div>{
             {num}}</div>
              <div>
              		 
              		<button v-on:click='handle1'>点击1</button>
              		
              		<button @click='handle2(12,23,$event)'>点击2</button>
              </div>
        </div>
        <script src="./js/vue.js"></script>
        <script> new Vue({ el: '#app', data: { num:1 }, methods:{ handle1:function(e){ this.num++   console.log(e.target.innerHTML) } handle2:function(p,p1,e){ console.log(p+p1)  console.log(e.target.innerHTML) this.num++ } } }); </script>
 *  **事件修饰符**  
    `1. 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。`  
    `2. Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on提供了事件修饰符`  
    `3. 修饰符是由点开头的指令后缀来表示的`
    
        
        	<a @click.stop="doList"></a>
        	
        	<form v-on:submit.prevent="onSubmit"></form>
        	
        	<a v-on:click.stop.prevent="doThat"></a>
        	
        	
        	<div v-on:click.self="doThat">...</div>
    
    `使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。`
 *  **按键修饰符**  
    `在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为`v-on`在监听键盘事件时添加按键修饰符`
    
        
        	<input v-on:keyup.13="submit">
        	
        	<input v-on:keyup.enter="submit">
        	
        	<input type="text" v-on:keyup.enter.space="alertMe" >
        	
        	<script> var vm = new Vue({ el:"#app", methods: { submit:function(){ }, alertMe:function(){ }, } }) </script>
 *  **自定义按键修饰符别名**  
    `在Vue中可以通过`config.keyCodes`自定义按键修饰符别名`
    
        <div id="app">
        	
        	 <input type="text" v-on:keydown.f5="prompt()">
        </div>
        <script> Vue.config.keyCodes.f5 = 116; let app = new Vue({ el: '#app', methods: { prompt: function() { alert('我是 F5！'); } } }); </script>
 *  **v-bind**  
    `v-bind 指令被用来响应地更新 HTML 属性'`  
    `v-bind:href 可以缩写为 :href;`
    
        
        <img v-bind:src="imageSrc">
        
        <img :src="imageSrc">
 *  **绑定对象**  
    `我们可以给v-bind:class 一个对象，以动态地切换class。`  
    `注意：v-bind:class指令可以与普通的class特性共存`
    
        <style> .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style>
        	
        <div id="app">
        	<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
        	    <li>学习Vue</li>
        	    <li>学习Node</li>
        	    <li>学习React</li>
        	</ul>
        </div>
        <script> var vm= new Vue({ el:'.box', data:{ isColor:true, isSize:true， } }) </script>
 *  绑定class
    
        <style> .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style>
        
        <div id="app">
        	<ul class="box" v-bind:class="[classA, classB]">
        	    <li>学习Vue</li>
        	    <li>学习Node</li>
        	    <li>学习React</li>
        	</ul>
        </div>
        <script> var vm= new Vue({ el:'.box', data:{ classA:‘textColor‘, classB:‘textSize‘ } }) </script>
 *  绑定对象和绑定数组 的区别  
    `1. 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据`  
    `2. 绑定数组的时候数组里面存的是data 中的数据`
 *  **绑定style**
    
        <div id="app">
        	 <div v-bind:style="styleObject">绑定样式对象</div>
        	 
        	 <div v-bind:style="{ fontSize: fontSize,background:'red' }">内联样式</div>
        	 
        	 <div v-bind:style="[styleObj1, styleObj2]"></div>
        </div>
        <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px', background:'red' }, fontSize: "30px", styleObj1: { color: 'red', width:'100px' }, styleObj2: { fontSize: '30px' } } </script>
 *  **分支结构**
 *  **v-if 使用场景**  
    `1. 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素`  
    `2. 进行两个视图之间的切换`
    
        <div id="app">
           
           <span v-if="flag">
               如果flag为true则显示,false不显示!
           </span>
        </div>
        <script> var vm = new Vue({ el:"#app", data:{ flag:true } }) </script>
 *  **v-show 和 v-if的区别**  
    `1. v-show本质就是标签display设置为none/block，控显示隐藏`  
    `v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点`  
    `2. v-if是动态的向DOM树内添加或者删除DOM元素`  
    `v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件`
 *  **循环结构**
 *  **v-for**  
    `用于循环的数组里面的值可以是对象，也可以是普通元素`
    
        <ul id="example-1">
        	   
        	  <li :key="item.id" v-for="item in items">
        	    {
             { item.message }}
        	  </li> 
        	    
        	   <div v-for='(v,k,i) in obj'>{
             {v + '-' + k + '-' + i}}</div>
        </ul>
        <script> new Vue({ el: '#example-1', data: { items: [ { id:1, message: 'Tom' }, { id:2, message: 'Jerry' } ]， obj: { uname: 'lfang', age: 13, gender: 'female' } } }) </script>
 *  **key 的作用** `一般循环都会添加key 目的是`  
    `1. key来给每个节点做一个唯一标识`  
    `2. key的作用主要是为了高效的更新虚拟DOM`