• Vue入门到放弃之旅今日开启第一篇

    这里写自定义目录标题

    寄语(废话文学)

    首先日常完成工作后,我们开始打开B站,搜索vue.js从入门到精通教程,会出来一大堆让你眼花缭乱.然后们随便点进去看一个,激情满满的一天上午就开始了,目前来说我还是很亢奋的,斗志昂扬!

    在这里插入图片描述

    那必然选择播放了靠前先试试水,好了话不多说,开始看开始砍.

    在这里插入图片描述

    p1-p7总结

    vue的三大特点:

    1. 组件化,增加复用性
    2. 声明式编码 简洁 区别于命令式编码
    3. 虚拟DOM+DIFF对比算法(这个我理解感觉就类似内存或者缓存)

    vue初学的两个语法:

    1. 插值语法:应用于标签体的内容{{}}
    2. 指令语法:应用范围较广 标签属性,标签体等 这里举例介绍了v-bind:href=“url” ==> :href=“url”

    代码示例如下: (这里安装的vscode插件有)
    Bracket PairColorizer2,chinese,liveSEerver,pathAutoComplete,vue

    	 <!-- 引入vue -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    		</script>
    <!-- 容器 -->
    <div id="root">
       <h1> Hello,{{name}}</h1>
       <a :href="url">{{school.name}}</a>
    </div>

    <script type="text/javascript">
        //创建vue实例
        new Vue({
            //el用于指定当前vue实例为那个容器服务,值通常为css选择器字符串
            el:'#root',
            data:{
                //data用于存储数据 供el指定的容器去使用
                name:'插值语法',
                school:{
                    name:'a标签'
                },
                url:'http://127.0.0.1:5500'
            }
        })
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    p8-p13总结

    el语法:两种写法

    1.1 创建时挂载: el:'#root' 
1.2 创建后挂载: v.$mount('#root') 

    • 1
    • 2
    			//el的两种写法 创建时挂载
			el:'#root', 
			//创建后挂载
		    v.$mount('#root')

    • 1
    • 2
    • 3
    • 4

    data两种写法

    2.1 对象式: 初期使用没有问题 
2.2 函数式: 使用组件时必须使用函数式

    • 1
    • 2
     			//1.data第一种写法:对象式
            /*data:{
                //data用于存储数据 供el指定的容器去使用
                name:'插值语法',
                school:{
                    name:'a标签'
                },
                url:'http://127.0.0.1:5500'
            }*/
            //2.data第二种写法:函数式
            data:function(){
                return{
                    name:'插值语法',
                    school:{
                        name:'a标签'
                    },
                    url:'http://127.0.0.1:5500'
                }
            }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    理解MVVM

    M模型(model): 对应data中的数据
    V视图(view): 模板
    VM视图模型(viewModel): vue实例对象 Dom监听,dataBings

    在这里插入图片描述

    顾名思义对象替换默认属性(具体查看注释和对应的变量)
    let是块作用域 var是函数作用域

    在这里插入图片描述

    Vue的数据代理

    Vue的数据代理特性分析以及示意图展示

    在这里插入图片描述
    在这里插入图片描述

    点击事件处理

    v-on:click点击事件 ===> @click(方法名()) 点击事件中可以写简单的事件处理

    在这里插入图片描述
    在这里插入图片描述

    键盘属性

    这里记录一下登录回车事件的实现 我这里引用的element-ui

     <el-button  style="width: 240px;" type="primary" 
 				 @:keyup.enter.native="submit" @click="login('user')">提交</el-button>			 
 new Vue({
            el:'#login',
            data:{
                user:{
                    username:'',
                    password:''
                } 
            },
            mounted() {
                //绑定事件
                window.addEventListener('keydown',this.keyDown)
            },
            methods: {
                //登录方法
                login(user){
                    
                    console.log(this.user)
                },
                //绑定监听事件
                keyDown(e){
                    console.log(e)
                    //如果是回车则执行登录方法
                    if(e.keyCode===13){
                        this.login();
                    }
                },
                //销毁事件
                destroyed() {
                    window.removeEventListener('keydown',this.keyDown,false);
                },
            },
        })   

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    计算属性 Computed

    computed和methods的区别:
    computed页面多次调用相同属性时只会被调用一次,内部有缓存机制
    methods方法会被多次调用

    在这里插入图片描述

    不考虑修改,只考虑读取的时候完整写法与简写

    在这里插入图片描述

    阶段小练习 登录小页面

    <!DOCTYPE html>
<html lang="zh_CN">
<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>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #login{
            width: 350px;
            height: 200px;
            background-color: rgb(17, 155, 109);
            position: absolute;
            padding: 40px 47px;
            left: 50%;
            top: 50%;
            margin-top: -140px;
            margin-left: -222px;
        };
    </style>
</head>
<body>
    <div id="login">
        <el-form  :model="user" status-icon  ref="ruleForm" label-width="60px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="pass" class="input">
              <el-input type="text" v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="checkPass" class="input">
              <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button  style="width: 290px;" type="primary"  @:keyup.enter.native="submit" @click="login('user')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
   
</body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#login',
            data:{
                user:{
                    username:'',
                    password:''
                }       
            },
            mounted() {
                //绑定事件
                window.addEventListener('keydown',this.keyDown)
            },
            methods: {
                //登录方法
                login(user){
                    console.log(this.user)
                },
                //绑定监听事件
                keyDown(e){
                    console.log(e)
                    //如果是回车则执行登录方法
                    if(e.keyCode===13){
                        this.login();
                    }
                },
                //销毁事件
                destroyed() {
                    window.removeEventListener('keydown',this.keyDown,false);
                },
            },
        })  
    </script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    p22 侦听属性(监视属性)

    watch监视data属性值的同时也可以监视计算属性的值
    下方是对应的两种写法以及方法总结

    在这里插入图片描述

    vue的监视属性/深度监视正常写法和简写区别在于想使用immediate和deep属性时不可使用简写,必须使用正常写法
    注意:不可使用箭头函数,箭头函数修改的时windows的属性值不是vue的属性值

    在这里插入图片描述

    p25 watch和computed对比

    监视属性(侦听属性)和计算属性对比

    • 1.computed能完成的功能,watch都可以完成
    • 2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作.
      两个注意点:
      2.1. 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象.
      2.2. 所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数这样this的指向才是vm或组件实例对象.

    在这里插入图片描述

    如有需要请移步第二篇````

  • 相关阅读:
    【9】c++11新特性 —＞&&的特性
    Attention 机制是什么？
    【华为机试真题 JAVA】最长连续的数字串-200
    居延安《公共关系学》重点整理
    运维自动导出业务容器Java堆栈错误日志脚本
    蓝桥等考Python组别十三级004
    go-zero单体服务使用泛型简化注册Handler路由
    k-means clustering algorithm，K均值算法
    css第九课：文本属性
    ASP.NET Core 3.1系列（16）——Entity Framework Core之Code First
  • 原文地址：https://blog.csdn.net/rows_com/article/details/124794885