Vue

1、javascript复习以及ES6介绍

　　javascript : 是个编程语言，是个非编译性语言是个解释性语言是一个脚本语言对数据类型不敏感

组成：

ECMAScript: javaScript规范
dom ： document Object Model 文档对象模型：把整个页面抽象成一个document对象
bom ： broswer Object Model 浏览器对象模型把浏览的功能键抽象成一个window

ECMAScript是核心

　　ES6 ECMAScript的第6个版本 2015年就出来（2019年左右被大量处理）
　　ES6的新语法学习：阮一峰写了一本书 ES6 对应的有一个帖子 ES6的学习内容

2、node.js

　　node.js不是编程语言就是js代码运行的运行环境

安装步骤：

1：下载
2：安装（双击）下一步下一步 (选择安装目录（不要有中文不要有空格）)
3：在cmd中使用node -v 查看是否安装成功
4： node + js文件运行js

3、ES6 的使用

3.1、let和const的使用

　　以前变量定义的方式使用关键字var 因为js是一个弱类型语言所以var可以接受任何类型

var 变量名 = 值（任何类型）

在ES6中提供了一个修饰符来修饰变量
　　let :以接受任何类型

1 、可以修改变量但是let修饰的变量在同一个作用域下只能被定义一次多次定义将会报错
2、 let修饰的变量有块级作用域

　　const: 修饰的变量是常量有点类似于java中的final

注意点： const修饰的变量变量中存的值不能发生改变哪怕修改成原来的值都不可以
const修饰的变量定义的时候必须给值不给值将会报错

 // 此时变量中存储的是地址 这个地址并没有发生概念 而概念的是地址指定的位置的数据发送改变了
const  huige  = {
    name:"huige",
    age:20
}

// ooo=100; //隐式全局变量

huige.age=100

console.log(huige);

//setTimeOut是一个异步操作 就算延迟0秒（不延时） 后面的代码也先执行
// setTimeout(function () {
//     console.log("aaa");
// }, 0)

// {
//    let i = 0;
//     setTimeout(function () {
//         console.log(i);
//     }, 0)
// }
//
// {
//     let i =1;
//     setTimeout(function () {
//         console.log(i);
//     }, 0)
//
// }
//
// {
//     let i =2 ;
//
//     setTimeout(function () {
//         console.log(i);
//     }, 0)
// }
//
// {
//     let  i =3;
//     setTimeout(function () {
//         console.log(i);
//     }, 0)
// }
//
// for (let i = 0; i < 10; i++) {
//     setTimeout(function () {
//         console.log(i);
//     }, 0)
// }


// let a = 10;
// let b = "str";
// let c = true;
//
// console.log(a);
// console.log(b);
// console.log(c);
// ////////////////////////////////
//
// var huige = 1;
// var  hugie =2;
// var huige = 3;
// console.log(huige);


// let  zs  = 10;
// let   zs = 20;

// let  zs  = 10;
// if(1){
//     let zs  = 20;
//     console.log(zs);
// }
//
// console.log(zs);

3.2、对象的定义

对象：是一组无序的键值对

包含：
　　属性： value值不是一个函数的
　　行为： value是函数的就是行为

1: 当对象的属性和变量的变量名一致的时候此时可以简写
2: 行为：如果这个函数时一个匿名函数此时可以简写
3: 行为：如果这个函数时一个命名函数并且函数名和属性名一致此时可以简写
 let obj = {
 name: "huige",
 say:function(){}
 }

let  name = "huige"

function  say(){
    console.log("我爱说");
}
let obj = {
    name,
    say
}

obj.say()
console.log(obj);

// let  obj  = {
//     name:"huige",
//     say:function (){
//         console.log("huige ");
//     }
//
// }
//
// console.log(obj);
//
// obj.say()

3.3、解构赋值

解构取值语法   修饰符 {对象的属性名: 变量名} = 对象

// let a = 10;
// let b = 20;
// let c = 30;
//

// let array  = [10, 20, 30];
// let [a, b, c] = array;  //从数组中取值
//
// let [,,e] =array  //没用
// console.log(a);
// console.log(b);
// console.log(c);
//
// console.log(e);

//解构取值语法   修饰符 {对象的属性名: 变量名} = 对象
let obj = {
    name: "huige",
    age: 20,
    address: "郑州"
}
// let str = obj.name;//==let {name: str} = obj;

// let {name: name, age: age, address: address} = obj;
let {name, age, address} = obj;  //大量使用

console.log(name);
console.log(age);
console.log(address);

3.4、箭头函数

　　ES6 提供了箭头函数和 lambda表达式差不过
　　语法： (参数列表)=>{函数体}

3.4.1、定义没有参数没有返回值的函数

//定义没有参数 没有返回值的函数

// let huige = ()=>{console.log("我是辉哥")};
let huige = () => console.log("我是辉哥");

huige();

3.4.2、有参数没有返回值

//有参数 没有返回值

// 有1个参数  如果只有一个参数 （）可以省略 ，如果设置默认值时 需要加小括号
// let  huige1 = (x)=>console.log(x);
// let  huige1 = (x=1) =>console.log(x);
// huige1(30);
// huige1()
// 有多个参数 小括号不能省略
// let  hugie2 = (x=0,y=0)=>console.log(x+y);
// hugie2(10)

3.4.3、没参数但是有返回值

　　如果{}号中只有一行代码此时花括号和return 必须同时存在或者同时不存在

//没参数 但是有返回值  如果{}号中只有一行代码 此时花括号和return 必须同时存在 或者同时不存在

let huige3 = () => 20;

var number = huige3();
console.log(number);

3.4.4、有参数有返回值

//有参数 有返回值
let huige4 = (a, b, c, d) => a + b + c + d;

console.log(huige4(10, 20, 30, 40));

3.4.5、箭头函数与普通命名函数的区分

箭头函数中没有 arguments来封装实参当传递多个参数时需要一个可变参数作为形参

普通命名函数有arguments来封装实参当传递多个参数时时不需要形参

/**
 * 箭头函数  中没有 arguments来封装实参  此时需要一个可变参数作为参数
 *
 * 普通命名函数 有什么区分  有arguments来封装实参  此时不需要参数
 *
 *
 * nan  不是一个数字   是不是  不是一个数组 如果是  表示不是一个数字 如果false 表示是一个数字
 */

// function sum() {
// }


// let sum = (...num)=>{
//     let sum = 0;
//     for (let i = 0; i < num.length; i++) {
//         var argument = num[i];
//         var number1 = parseFloat(argument);
//         if (!isNaN(number1)) {
//             sum += number1;
//         }
//     }
//     return sum;
// }

// sum();
// console.log(sum(1,2,4));;
// sum(1,2,true);
// console.log(sum(1, 2, "str", "gg", "99766",true,"true"));


/*
console.log(isNaN(true));



console.log(+true);
*/

// console.log(parseFloat("99999"));

let obj = {
    name: "huige",
    say() {
        var that = this;




        setTimeout(function () {

            console.log(kiujkgjjifgbuug.name);
        }, 1000)

        setTimeout(()=>console.log(this.name),1000)
    }
}

obj.say();


/*
* this: 表示的是当前对象
*
*       谁调用这个函数  这个函数中的this就指谁
*
*
*
* */

// setTimeout(function (){
//     console.log(this);
// }.bind(this),1000)


console.log(this);

3.5、字符串拼接

　　使用``拼接字符串，``里不用写转义字符

4、Vue的大概介绍

　　Vue读音=(view) 是前端的一个渐进式框架

　　总结： vue是一个框架是一个MVVM框架，内部提供了虚拟DOM 让我们无任何的DOM操作，由于是MVVM的框架所以可以动态感知数据的变化进而自动的修改视图，可以动态感知视图的变量进而动态的修改数据并且Vue提供了组件、指令、插槽、路由等功能方便我们开发工程，并且Vue默认对单页面应用程序SPA程序支持良好和ES6中的模块化导入导出功能无缝整合。

MVVM :

M: 数据
V: view 视图
VM: 监听器

详见图片

Vue开发时注意点
1：兼容性问题
　　兼容ie8以上

2：版本问题：
　　长期稳定版 2.6.14

3： vue开发工具（插件）很重要

4：生产包和开发包的区别
　　生产包无法调试（发布的时候使用生产包）
　　开发包可以调试（开始需要调试所以开发时需要使用开发包

4.1、vue的简单感受

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    {{}} 插值表达式 里面的取值 就是对应data中的对象的属性名 把属性值展示到这个位置-->
    <span>{{message}}</span>
</div>

<span>{{message}}</span>

<!--引入vue.js
mvvm

    M: 数据模型： data中的对象 就是数据模型
    V:  id= app的标签表示视图 el属性指定的选择器对应的标签 就是视图
    VM: vue对象

-->
<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            message:"辉哥"
        }
    })

</script>
</body>
</html>

5、vue的使用

5.1、vue的插入值表达式

插值表达式：

　　语法 {{}} 作用的地方是标签体里面的取值是 data中定义的属性

功能：

1：取值
2：字符串拼接
3：三目运算符
4：调用函数
5：数值运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
插值表达式：
    语法  {{}} 作用的地方 是标签体 里面的取值是 data中定义的属性

    功能：
      1： 取值
      2： 字符串拼接
      3： 三目运算符
      4： 调用函数
      5： 数值运算


-->
<div id="app">
    <!--  1： 取值  -->
    <div>{{message}}</div>
    <!--  2： 字符串拼接  -->
    <div>{{"我是:" + message}}</div>
    <!--  3 数值运算  -->
    <div>{{age + 2}}</div>
    <!--  4 三目运算符  -->
    <div>{{age > 18 ? "已成年" : "青少年"}}</div>
    <!--    可以调用函数  -->
    <div>{{"辉哥真球帅".substr(1, 3)}}</div>
    <div>{{message.substr(0, 1)}}</div>



</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            message: "辉哥",
            age: 20,
            num: "990AAA"
        }
    })

</script>
</body>
</html>

5.2、v-text&&v-html

v-text的功能和插值表达式一模一样
取值：data中的属性名
不一样的地方：
插值表达式写在标签体中取的值展示在标签体中（单标签无法使用）

v-text 写在标签的属性位置取的值展示在标签体（单标签无法使用）

v-text 对html字符串不识别

v-html 和 v-text使用一模一样只是识别html字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--

v-text的功能和 插值表达式一模一样
取值：data中的属性名
不一样的地方：
        插值表达式 写在标签体中 取的值展示在标签体中 （单标签无法使用）

        v-text 写在标签的属性位置 取的值展示在标签体 （单标签无法使用）

        v-text 对html字符串不识别


        v-html 和 v-text使用一模一样 只是识别html字符串


-->
<div id="app">
    <!--  1： 取值  -->
    <div v-text="message"></div>
    <!--  2： 字符串拼接  -->
    <div v-text="'我是:' + message"></div>
    <!--  3 数值运算  -->
    <div v-text="age+2"></div>
    <!--  4 三目运算符  -->
    <div v-text="age > 18 ? '已成年' : '青少年'"></div>
    <!--    可以调用函数  -->
    <div v-text="'辉哥真球帅'.substr(1, 3)"></div>
    <div v-text="message.substr(0, 1)"></div>
    <div v-text="htmlStr"></div>

    <div>{{htmlStr}}</div>

    <hr>
    <!--  1： 取值  -->
    <div v-html="message"></div>
    <!--  2： 字符串拼接  -->
    <div v-html="'我是:' + message"></div>
    <!--  3 数值运算  -->
    <div v-html="age+2"></div>
    <!--  4 三目运算符  -->
    <div v-html="age > 18 ? '已成年' : '青少年'"></div>
    <!--    可以调用函数  -->
    <div v-html="'辉哥真球帅'.substr(1, 3)"></div>
    <div v-html="message.substr(0, 1)"></div>
    <div v-html="htmlStr"></div>



</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            message: "辉哥",
            age: 20,
            num: "990AAA",
            htmlStr:"<h1>我是标题</h1>"
        }
    })

</script>
</body>
</html>

5.3、v-bind

v-bind
前提：插值表达式 v-html v-text 作用的地方都是标题体

v-bind作用的地方是标签的属性
1: 语法：

v-bind:属性名="data中的属性名"
:属性名= "data中的属性名"

2: class属性的对象语法
{class的类名： boolean值} 表示满足条件的时候 class类将会生效不满足的时候不生效

3: 在字符串拼接中使用这种语法

4: 不要掌握
v-bind:[data中的属性名]
:[data中的属性名]
<img :[xxxx]="imgUrl" alt="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
 v-bind
  前提： 插值表达式  v-html v-text  作用的地方都是标题体

   v-bind作用的地方是标签的属性
   1:    语法： v-bind:属性名="data中的属性名"
           :属性名= "data中的属性名"


   2:  class属性的对象语法
            {class的类名： boolean值}
               表示 满足条件的时候 class类将会生效 不满足的时候不生效


   3:  在字符串拼接中使用这种语法


   4: 不要掌握
        v-bind:[data中的属性名]
            :[data中的属性名]
    <img :[xxxx]="imgUrl" alt="">









-->

<style>
    .huige {
        color: red;
        font-size: 18px;
    }

    /*    */
</style>
<div id="app">
<!--    <img src="./mvvm.png" alt="" v-bind:title="mytitle" :width="myWidth" v-bind:height="myHeight">-->
<!--    <p :class="{huige: age>18}">我是一朵花 为你而绽放</p>-->

<!--    <a v-bind:href="`/huige/xxx/id=${age}`">点我一下 你就知道</a>-->

    <img :[xxxx]="imgUrl" alt="">

</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            myWidth: 100,
            myHeight: 100,
            mytitle: "我是谁",
            age: 18,
            imgUrl: "./mvvm.png",
            xxxx: "src"

        }
    })

</script>
</body>
</html>

5.4、v-for

遍历：

对象的遍历（了解）

v-for="(value,key) in obj" :key="key"

v-for="(value,key,index) in obj" :key="key"

数组的遍历

语法：

v-for= "item in list" 其中list是data中定义的数组

语法二：

v-for="(item,index) in list" 可以获取到索引

扯淡的语法

<li v-for="n in 20">{{n}}</li>

v-for = "item in list" 其中的in 可以换成of

优化点：

真正开发时用到的语法添加:key="唯一值（index 可以是Item中的id属性值）" 是为了view复用提高性能

v-for = "(item,index) in list" :key="index"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
 遍历：
    对象的遍历（了解）
            v-for="(value,key) in obj" :key="key"

            v-for="(value,key,index) in obj" :key="key"
    数组的遍历
        语法：
              v-for= "item in list"  其中list是data中定义的数组
         语法二：
                v-for="(item,index) in list" 可以获取到索引
    扯淡的语法
               <li v-for="n in 20">{{n}}</li>
          v-for = "item  in  list" 其中的in 可以换成of
      优化点：
            真正开发时用到的语法   添加:key="唯一值（index 可以是Item中的id属性值）" 是为了view复用 提高性能
                    v-for = "(item,index) in  list" :key="index"

-->
<div id="app">
    <ul>
        <!--        <li v-for="item of array" >{{item}}</li>-->
        <!--        <li v-for="(item,index) of array">索引为:{{index}}  索引的值是{{item}} 辉哥是{{huige}}</li>-->

        <li v-for="(a,b,index) in obj" :key="b" >a={{a}}  b={{b}} index={{index}}</li>

    </ul>


</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            array: ["aaa", "bbb", "cccc", "dddd"],
            obj: {
                name: "张珊",
                age: 20,
                address: "二七区"
            }

        }
    })


</script>

</body>
</html>

5.5、v-model

v-model 用于双向数据绑定

作用标签一般都是表单标签 input select textarea

动态绑定属性它是单项的数据发生概念视图发生概念视图发生改变数据不变

v-mode=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
 v-model  用于双向数据绑定
    作用标签 一般都是表单标签  input  select  textarea
            动态绑定属性 它是单项的  数据发生概念  视图发生概念 视图发生改变 数据不变

     v-mode=""
-->
<div id="app">

<!--    <input type="text" v-model="msg">-->
<!--    <input type="text" v-model="msg">-->

    <textarea cols="10" rows="10" v-model="msg"></textarea>

    <select v-model="msg">
        <option value="xxxxx">xxxx</option>
    </select>


</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            msg:"飞啊飞"

        }
    })


</script>

</body>
</html>

5.6、v-on

v-on 表示给标签设置事件

语法：

v-on:事件名称="事件处理函数" 事件处理函数要写在vue中

语法二：

@事件名="事件处理函数" 事件处理函数要写在vue中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
  v-on  表示给标签设置事件
        语法：
            v-on:事件名称="事件处理函数"  事件处理函数 要写在vue中


        语法二：
            @事件名="事件处理函数"  事件处理函数 要写在vue中





-->
<div id="app">

    <div>{{myText}}</div>

    <button v-on:click="clickMe">点我</button>
    <button @click="myText='ni hen hao'">点我</button>



</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            msg: "飞啊飞",
            myText:"我是文本"

        },
        //这个属性中专门写函数的
        methods: {
            clickMe(){
               this.myText="w shi huige"
            }

        }
    })


</script>

</body>
</html>

5.7、v-if&&v-show

v-if

v-if="boolean" 这个值可以来自于vue

v-show

v-show="boolean" 这个值可以来自于vue

都是控制标签是否展示

v-if 控制的方式直接把标签干掉

v-show控制的方式使用css中的隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
 v-if
    v-if="boolean"  这个值可以来自于vue

 v-show
    v-show="boolean"  这个值可以来自于vue

 都是控制标签是否展示
        v-if 控制的方式 直接把标签干掉
        v-show控制的方式 使用css中的隐藏

-->
<div id="app">
    <img src="./mvvm.png" width="150px" height="150px" alt=""  v-show="isShow">

    <button @click="isShow=true">点我展示</button>
    <button @click="isShow=false">点我隐藏</button>


</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
            isShow: false

        },
        //这个属性中专门写函数的
        methods: {
            // sureShow(){
            //     this.isShow=true
            // },
            // sureNoShow(){
            //     this.isShow=false
            // }
            //

        }
    })


</script>

</body>
</html>

5.8、$nextTick（）

监听器vm会监听到数据的变化此时异步刷新页面

这个this.$nextTick 里面定义的函数是在页面更新完成之后执行的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--


-->
<div id="app">
    <div ref="mydiv">{{huige}}</div>
    <button v-on:click="changeData">点我改变数据</button>


</div>


<script src="./vue.js"></script>
<script>
    let vue = new Vue({
        // el: 全称 element 表示元素的意思： 取值选择器  找到一个或者多个元素
        // 找到的元素 以及 这个元素的子元素 都会被vue管理
        el: "#app",
        //表示数据  取值是一个对象  data中对象中的属性可以随便写
        // 这些数据就是页面中要展示的数据
        data: {
          huige:"我是辉哥"

        },
        //这个属性中专门写函数的
        methods: {
            changeData(){
                this.huige="你丫的 不错 "  //监听器vm会监听到数据的变化 此时异步刷新页面
                //这个this.$nextTick 里面定义的函数  是在页面更新完成之后执行的
                this.$nextTick(()=>console.log(this.$refs.mydiv.innerText))

            }
        }
    })


</script>

</body>
</html>

posted @ 2021-06-13 21:55 mini9264 阅读(86) 评论(0) 收藏举报

刷新页面返回顶部

花时

风会记住一朵花的香，凡来尘往,莫不如此

Vue

1、javascript复习以及ES6介绍

2、node.js

3、ES6 的使用

3.1、let和const的使用

3.2、对象的定义

3.3、解构赋值

3.4、箭头函数

3.4.1、定义没有参数没有返回值的函数

3.4.2、有参数没有返回值

3.4.3、没参数但是有返回值

3.4.4、有参数有返回值

3.4.5、箭头函数与普通命名函数的区分

3.5、字符串拼接

4、Vue的大概介绍

4.1、vue的简单感受

5、vue的使用

5.1、vue的插入值表达式

5.2、v-text&&v-html

5.3、v-bind

5.4、v-for

5.5、v-model

5.6、v-on

5.7、v-if&&v-show

5.8、$nextTick（）

花时

风会记住一朵花的香，凡来尘往,莫不如此

Vue

1、javascript复习以及ES6介绍

2、node.js

3、ES6 的使用

3.1、let和const的使用

3.2、对象的定义

3.3、解构赋值

3.4、箭头函数

3.4.1、定义没有参数 没有返回值的函数

3.4.2、有参数 没有返回值

3.4.3、没参数 但是有返回值

3.4.4、有参数 有返回值

3.4.5、箭头函数与普通命名函数的区分

3.5、字符串拼接

4、Vue的大概介绍

4.1、vue的简单感受

5、vue的使用

5.1、vue的插入值表达式

5.2、v-text&&v-html

5.3、v-bind

5.4、v-for

5.5、v-model

5.6、v-on

5.7、v-if&&v-show

5.8、$nextTick（）

3.4.1、定义没有参数没有返回值的函数

3.4.2、有参数没有返回值

3.4.3、没参数但是有返回值

3.4.4、有参数有返回值