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>

p8-p13总结

el语法:两种写法

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

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

data两种写法

2.1 对象式: 初期使用没有问题 
2.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'
                }
            }

理解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);
                },
            },
        })   

计算属性 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>

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或组件实例对象.

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