vue基础用法

1. vue指令

(0). vue文本渲染三种方法 {{}}、v-text、v-html
  1. {{ }}将元素当成纯文本输出
  2. v-html
    v-html会将元素当成HTML标签解析后输出
  3. v-text
    v-text会将元素当成纯文本输出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue文本渲染三种方法</title>
</head>
<body>
    <div id="app">
     	/*{{}}和v-text不能解析html元素,只会照样输出*/
      	<p>{{hello}}</p>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</html>

//*********结果**************************
//<span>hello world</span>
//<span>hello world</span>
//hello world

(1). 单向绑定数据----v-bind

v-bind用于绑定元素属性(任何属性)和data里的数据,它的简写就是一个冒号(:)

//例:
<div class="app">
	//绑定vue中data的数据
    <a v-bind:href="url">click me</a>
    <a :href="url">click me</a>
</div>

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});
(2). 双向绑定数据----v-model(❗)
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord">
<input type="text" :value="searchMap.keyWord">
<p>您要查询的是:{{searchMap.keyWord}}</p>


data: {
    searchMap:{
        keyWord: '素小暖'
    }
}
  • v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:

    1. v-bind绑定数据
    2. v-on给当前元素绑定事件
  • 自定义v-model

  • v-model在input的下拉框、单选按钮、复选框中的应用

    <!--下拉框-->
    <div id="app">
      <select v-model="selected">
        <option value="A被选">A</option>
        <option value="B被选">B</option>
        <option value="C被选">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    //-------------------------------------------------------------------------------
    <script>
      new Vue({
        el: '#app',
        data: {
          selected: ''
        }
      });
    </script>
    //****************************************************************************
    //****************************************************************************
    <!--单选按钮-->
    <!--同一组单选按钮,需要将属性name设置为一样值-->
    <div id="app">
      <input type="radio" name="size" id="small" value="small_value" v-model="picked">
      <label for="small">small</label>
      <br>
      <input type="radio" name="size" id="big" value="big_value" v-model="picked">
      <label for="big">big</label>
      <br>
      <span>Picked: {{ picked }}</span>
    </div>
    //-------------------------------------------------------------------------------
    <script>
      new Vue({
        el: '#app',
        data: {
          picked: ''
        }
      })
    </script>
    //****************************************************************************
    //**************************************************************************** 
    <!--复选框-->
    <div id="app">
      <input type="checkbox" id="one" value="value_one" v-model="checkedNames">
      <label for="one">选项一</label>
      <input type="checkbox" id="two" value="value_two" v-model="checkedNames">
      <label for="two">选项二</label>
      <input type="checkbox" id="three" value="value_three" v-model="checkedNames">
      <label for="three">选项三</label>
      <br>
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    //-------------------------------------------------------------------------------
    <script>
      new Vue({
        el: '#app',
        data: {
          checkedNames: []
        }
      })
    </script>
    
  • v-model修饰符
    【修饰符:修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():即阻止事件原本的默认行为,比如冒泡事件】

    v-model也可以和.lazy、.trim和.number这些修饰符一起使用。

    <!-- 在每次 input 事件触发后将输入框的值与数据进行同步,添加 lazy 修饰符,从而转变为使用 change 事件,当焦点移出input时才会触发事件,输入框的值与数据才变成相同的 -->
    <input v-model.lazy="msg" >
    <!--去除字符串首尾的空格-->
    <input v-model.trim="msg">
    <!--将数据转化为值类型-->
    <input v-model.number="age" type="number">
    

    .lazy相当于一个延迟加载的过程。在上面我们讲过< input v-model=“test”>相当于一个语法糖< input :value=“test” @input=“test = $event.target.value”>,而< input v-model.lazy=“msg” >则相当将input的实时更新改为一个change事件,v-model.lazy只有当焦点移除input时才会触发事件。
    v-model效果和v-model.lazy效果。

(3). 条件渲染指令----v-if / v-show
<body>
	<div id="app">
		<input type="checkbox" v-model="checked">
		<p v-if="checked">{{checked}}</p>
		<p v-show="checked">{{checked}}</p>
	</div>
	<script type="text/javascript">
	/*
	v-if 语法
	v-if = '表达式 ture 元素显示 false 元素不存在页面上
	根据表达式的值的真假条件渲染元素和移出元素
	v-show 语法 显示隐藏切换推荐使用	
	v-show = '表达式' ture 元素显示 false 元素display:none
	根据表达式的值得真假,切换元素css display属性
	*/
	let vm = new Vue({
		el:'#app',
		data:{
			checked:true
		}
	})
	</script>
</body>

v-if和v-show的区别:

  1. v-if是动态的向DOM树中添加或删除DOM元素,当初始条件不成立时,v-if不会渲染DOM元素;不管初始条件是什么,v-show总会渲染元素,但是只是简单地基于 CSS 的display:none进行切换,设置当前DOM的显示和隐藏。
  2. 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
(4). 列表循环指令----v-for
<template>
	<div id="list">
    <ul>
    	<!-- 注意:key的取值必须是number 或 string,不能是对象 -->
        <!-- 而且使用 v-for 循环的每一项的值,都要保证唯一性 -->
        <li v-for="(item,index) in list" :key="item.id">
            {{index}}---{{item.name}}
        </li>
    </ul>
	</div>
</template>
<script>
  export default{
    name:'list',
    data(){
      return{
        list: [
                   { id: 1, name: '李斯' },
                   { id: 2, name: '嬴政' },
                   { id: 3, name: '赵高' },
                   { id: 4, name: '韩非' },
                   { id: 5, name: '荀子' },
                ]
      } 
    }
  }
</script>
  • 为什么使用Key:
    key是每一个vnode的唯一id,可以根据key,更准确, 更快的找到对应的vnode节点,diff算法中通过tag和key来判断是不是sameNode,如果是相同的节点,就不需要再次渲染了,使用key可以减少渲染次数,提升渲染效率。一般使用一个与业务相关的id作为key 值,而不使用 index,因为如果使用index作为key值,以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立正确关联关系,导致 Vue 会复用错误的旧子节点,做很多额外的工作,这就失去了 key 值存在的意义.
  • v-if和v-for的优先级
    v-for优于v-if被解析,如果同时出现,每次渲染都会执行循环再判断条件,无论如何循环都不可避免,浪费了性能
(5). 给元素绑定事件 ---- v-on

v-on用于给元素绑定事件,v-on:事件名 可以简写为 @事件名

<div class="app">
	//1. 直接绑定事件
    <button v-on:click="myclick">click me</button>
    <!-- $event是vue里面的事件对象,vue能认识 -->
    <button @click="second($event)">click me</button>
    //2. 绑定事件类
    <button v-on="{click:myclick,hover:second($event)}">click me</button>
</div>  
<script>
var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log(111111);
        },
        second:function(e){
        	e.preventDefault();
            //阻止浏览器的默认行为
            console.log(222222);
        }
    }
});
</script>

v-on的事件修饰符
  • stop:停止冒泡
    <div @click="upthis">
        aaa
        <!-- 阻止事件冒泡 -->
        <div v-on:click.stop="doThis">bbb</div>
    </div>
    
  • prevent:阻止默认行为
    <form action='baidu'>
        <!-- 提交事件不再重载页面(不会跳转页面) -->
        <input @click.prevent="doThat">
    </form>
    
  • capture
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    
  • once:只会触发一次
    <!-- 点击事件将只会触发一次,防止重复提交 -->
    <a v-on:click.once="doThis"></a>
    
  • 监听某个键盘的键帽
    <!-- 键修饰符,键别名 -->
    <input @keydown.enter="onEnter">
    
    <!-- 键修饰符,键代码 -->
    <input @keydown.13="onEnter">
    
  • 修饰符可以串联
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    

2. computed / watch

对于Computed:

  • computed的值会默认走缓存,只有依赖的数据发生了变化,才会重新计算。
  • computed不支持异步,当Computed中有异步操作时,无法监听数据的变化。
  • computed默认第一次加载的时候就会执行
  • computed默认深度监听
  • 当一个属性受多个属性影响的时候建议使用computed

对于Watch:

  • Watch不支持缓存,监听数据变化时,就会触发相应的操作
  • Watch支持异步监听
  • wtach默认第一次加载的时候不做监听,需要设置immediate
  • watch想要进行深度监听,需要设置deep。
  • 当一条数据影响多条数据的时候建议使用watch

总结:

  • computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
  • watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。

运用场景:

  • 当需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算。
  • 当需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许执行异步操作 ( 访问一个 API ),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

computed是怎么收集依赖的
对watch的理解

Vue中的watch如何深度监听某个对象

watch除了监听data里的属性,也可以监听计算属性或者一个函数的计算结果。

  • 深度监听对象的两种方式:
  1. 字符串嵌套方式

    export default {
        data () {
            return {
               a: {
                   b: {
                       c :'张三'
                   }
               }
            }
        },
        watch: {
            //想监听 c  此时数据比较深   深度监听
            "a.b.c": function (newValue, oldValue) {
                
            }
        } 
    }
    
  2. 启用深度监听方式

     export default {
           data () {
               return {
                  a: {
                      b: {
                          c :'张三'
                      }
                  }
               }
           },
           watch: {
               a: {
               	   // deep 为true  
               	   //意味着开启了深度监听 
               	   //a对象里面任何数据变化都会触发handler函数
                   deep: true ,
                   handler(){
                      // handler是一个固定写法
                   }
               }
           }    
      }    
    

3. vue组件化

组件化

  • 组件中的data为什么是一个函数?
    一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同实例之间的data不冲突,data必须是一个函数。

组件之间通信的方法

1.父子组件通信

(1). 父组件向子组件传值 ------ props,props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改父组件的状态。
例:
子组件
在这里插入图片描述
父组件
父组件
(2). 子组件向父组件传值 ------ $emit()自定义事件
例:
子组件
子组件
父组件
父组件

2. 使用$refs 获取实例组件,进行数据获取
3. 利用浏览器本地缓存

例如localStorage

4. 利用发布订阅模式

使用eventBus : $emit()和 $on进行跨组件传值 进而传递数据
new
first

second
$on : 监听当前实例上的自定义事件(此处当前实例为 bus,自定义事件是userDefinedEvent ) 。 事件由 $emit触发,回调函数会接收所有传入事件触发函数( $emit)的参数。

5. vuex

vuex知识点

4. vue生命周期

vue生命周期是指vue实例对象从创建之初到销毁的过程
vue生命周期
◾详细描述:

  1. beforeCreate: vue初始化开始,此时还不能访问到data、methods、computed、watch里面的数据和方法。
  2. created: vue实例创建完成,已经完成数据和方法的初始化,此时可以访问到data、methods、computed、watch里面的数据和方法了;
  3. beforeMount:模板已经在内存中编译好了,但尚未挂载到页面中去。
  4. mounted:DOM渲染完成,实例挂载到DOM上,此时可以获取到DOM节点并对其进行操做了。
  5. beforeUpdate: data中的数据是最新的,但页面还是旧的,页面尚未和数据保持同步;
  6. updated: 页面和data中的数据同步了,都是最新的。
  7. beforeDestroy: vue实例进入销毁阶段,但还没有真正执行销毁的过程,此时实力上所有的数据和方法等都还处于可用状态,该过程常用于销毁定时器、解绑全局事件、销毁插件对象等操作;
  8. destroyed:vue实例已被销毁,该vue示例中的所有东西都不可用了;

◾考虑父子组件的生命周期执行顺序:

  • 实例初始化过程: 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 子组件更新过程: 父beforeUpdate->子beforeUpdate->子updated->父updated
  • 父组件更新过程 父beforeUpdate->父updated
  • 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

◾keep-alive 独有的生命周期,分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值