vue学习阶段性总结回顾

vue学习总结

文章目录

      • vue学习总结
        • 引进库文件:三种方式引入
        • 简单实例
        • 简单解释
        • 模板语法
        • 数据绑定
        • el的两种写法
        • data属性的两种写法
        • MVVM模型
        • Object.defineproperity
        • 什么是数据代理?
        • vue中数据代理
        • 事件的基本使用
        • 事件修饰符
        • 自定义快捷键
          • 系统修饰键
        • 计算属性
        • 监视属性
        • 样式绑定

引进库文件:三种方式引入

  1. CDN方法导入(国内)

     <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    
  2. unpkg方式导入

    <script src="https://unpkg.com/vue@next"></script>
    
  3. 离线本地导入js库文件(要注意自己的路径名称)

    <script src="../../js/Vue.js"></scrip
    

简单实例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="../../js/vue.js">script>
head>
<body>
    <div id="app">
        {
    {mess}}
        <h2>
            {
    {mess}}
        h2>
    div>
    <script>
        new new Vue({
       
            el: '#app',
            // 这里的data是声明我们要使用的数据,这样有利于后面的维护
            data() {
       
                return {
       
                    mess: 'demo123'
                }
            },
            // methods中包含的是我们对这个页面的整个逻辑以及页面中的触发事件,里面的内容就相当于JavaScript中的function内容
            methods: {
       
            }
        })
    script>
body>
html>

简单解释

    el:通过id选择器绑定DOM,在vue中,只需要el中对DOM的id进行挂载,也相当于一个钩子,el通过id的特征勾住了id所在标签内的所有
    内容,这样我们就可以实现在vue中实现对DOM中的操作 

el: 通过id选择器绑定DOM,在Vue中,只需要对DOM的id进行挂载,也相当于一个钩子,el通过id的特征勾住了id所在标签内的所有内容,这样我们就可以实现在vue中对DOM的操作。

data: 这里的data是声明我们要使用的数据,这里有利于我们后面的维护

methods: 这里面包含的是我们对整个页面的逻辑以及页面中的触发事件

模板语法

  1. 插值语法:
    • 功能:用于解析标签体内容
    • 写法:{ {xxx}},xxx是js表达式,是可以直接读取到data中所有的数据属性
  2. 指令语法
    • 功能:用于解析标签,如
      • 标签属性
      • 标签体内容
      • 绑定事件
    • 举例:v-bing:href="xxx"或简写:href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中所有的属性

数据绑定

  • 单向绑定(v-bind):数据只能从data流向页面
  • 双向绑定(v-modl):数据不仅能 从data流向页面,还可以从页面流向data
  • 注意:双向绑定一般都应用在表单类的元素上,如input,select等等

el的两种写法

  • 写法一:

    在new Vue的时候配置el属性

    		<script type="text/javascript">
    			new Vue({
           
    				el:"#app",
    				data() {
           
    					return {
           
    						name: '李明'
    					}
    				},
    			})
    		</script>
    
  • 写法二:

    先创建vue实例,然后通过mount方法绑定

    	<script type="text/javascript">
    			const vm=new Vue({
           
    				data() {
           
    					return {
           
    						name: '李明'
    					}
    				},
    			})
    			vm..$mount('#app')
    	</script>
    

data属性的两种写法

  1. 对象式: data:{ 属性名:属性,… }
  2. 函数式:data(){ return { 属性名:属性,… } }

MVVM模型

  • M:即模型model,表示data中的数据
  • V: 即视图view,表示模板代码
  • VM:即视图模型viewModel,表示Vue实例

备注:data中所有的属性,最后都会出现在vm身上,在vue模板中可以直接使用。

Object.defineproperity

给对象追加属性,相关配置属性如下:

  • value:给属性设置值
  • enumerable:设置属性是否可以枚举,默认false,不可以枚举的属性在遍历中看不到
  • writable:设置属性是否可以被修改,默认为false
  • configurable:设置属性是否可以被删除,默认是false
  • get函数:当该属性被读取时,get函数就会被调用,返回值为value的值
  • Set函数:当该属性被修改的时候,Set函数就会被调用,可以收到被修改的具体值。

什么是数据代理?

通过一个对象代理对另一个对象中属性的操作,举例:

<script type="text/javascript" >
			let obj = {
     x:100}
			let obj2 = {
     y:200}

			Object.defineProperty(obj2,'x',{
     
				get(){
     
					return obj.x
				},
				set(value){
     
					obj.x = value
				}
			})
		</script>

vue中数据代理

  • 概念:通过vm对象来代理data来代理对象中属性的操作
  • 好处:更加方便的操作data中的数据
  • 原理:通过Object.defineProperty()把data对象中的所有属性都添加vm上;并为每一个添加到vm的属性都指定一个getter和setter方法
  • 在getter和setter的内部去操作data中对应的属性。

事件的基本使用

  1. 使用V-on:事件名@事件名绑定事件;
  2. 事件的回调需要配置在methods对象中,最终会在vm上
  3. methods中配置的函数,不要用箭头函数,一旦用了箭头函数,那么this的指向就不是vm了,而是window
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或者组件的实例对象。
  5. 注意:@click="demo"和@click="demo($event)"效果一致,但是后者可以传递参数。

事件修饰符

  • prevent:阻止默认事件
  • stop:阻止事件冒泡
  • once:让事件只触发一次
  • capture:使用事件的捕获形式
  • self:只有event.target是当前操作的元素才触发事件
  • passsive:事件的默认行为是立即执行,无需等待事件的回调执行完毕.

自定义快捷键

Vue.config.keyCodes.自定义键名=键码,可以订制按键别名

系统修饰键

有ctrl,shift,alt,win

  • 配合keyup使用,按下修饰键的同时,在按下其他键,随后释放其他键,事件才能出发
  • 配合keydown使用,正常触发事件

计算属性

  • 定义:要使用的属性不在,要通过已有的属性计算得来
  • 原理:底层借助了object.defineproperty()方法提供的get方法和set方法
  • set方法执行时机
    • 初次读取时执行一次
    • 当依赖的数据发生改变时会再次调用
  • 优势:与methods实现相比,内存有缓存机制,表现出效率效率更高,调试方便
  • 注意:计算属性最终会出现在vm上,直接读取使用即可;如果计算属性要被修改,那必须写set函数去相应修改,且set中要引起计算时所依赖的数据改变。

监视属性

  1. 当被监视的属性变化时,回调函数会自动调用,进行相关的操作

  2. 监视属性必须存在,才能进行配置

  3. 监视的写法:

    • 写法1:在new vue时传入Watch配置
    • 写法2:通过$watch监视
  4. 举栗子:

    const vm=new Vue({
           
                el:'#app',
                data() {
           
                    return {
           
                        name:''
                        ,age:''
                    }
                },
                // 写法1
                watch: {
           
                    name:{
           
                        immediate:true,//初始化时让下面的回调函数执行一次
                        handler(newVal,oldVal){
           
                            console.log('name属性值被修改了'+oldVal+'=>'+newVal)
                        }
                    }
                },
            })
            // 写法2
            vm.$watch('age',(newVal,oldVal)=>{
           
                console.log('hello')
                console.log(oldVal+'=>'+newVal)
            })
    

    补充:computer和watch之间的区别

    • computer能完成的功能,watch都可以完成
    • watch能完成的功能,computer不一定能完成,列如:watch可以进行异步操作。
    • 注意:箭头函数中this指的是window,而不是vm实例,故所被vue管理的函数最好写成普通函数式,这样this.的指向才是vm或者实例对象。

    样式绑定

    • class样式

      • 写法:class=“xxx” xxx可以是字符串,数组或者对象
      • 注意:
        • ​ 字符串适用于类名不确定,要动态获取
        • ​ 数组写法适用于要绑定多个样式,个数确定,名字确定的情况
        • ​ 对象写法适用于要绑定多个样式,个数不确定
    • style样式

      • 写法

        :style="{样式}",样式是动态值
        style="[a,b]",其中的a,b是样式对象

    举栗子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>样式绑定练习</title>
        <script src="../../js/vue.js"></script>
        <style>
            .s1{
           
                color: rgb(236, 173, 37);
            }
            .s2{
           
                background-color: red;
            }
            .s3{
           
                font-size: larger;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2 :class='style1'>{
           {
           name}}</h2>
            <h2 :class='style2'>{
           {
           name}}</h2>
            <h2 :class='style3'>{
           {
           name}}</h2>
            <h2 :style='style4'>{
           {
           name}}</h2>
        </div>
        <script>
            new Vue({
           
                el:'#app',
                data() {
           
                    return {
           
                        name:'liming',
                        style1:'s1',//字符串形式
                        style2:['s1','s2','s3'], //数组形式
                        style3:{
           
                            //对象形式,对每个样式设置布尔值,当设置为true时启用,当为false时不启用该样式
                            s1:true,
                            s2:false,
                            s3:true
                        },
                        //  样式定义
                        style4:{
           
                            color:'blue'
                        }
                    }
                },
            })
        </script>
    </body>
    </html>
    

后续更新。。。。。。。。。。。。。

你可能感兴趣的:(Vue,vue.js,javascript,前端)