es6常用语法简介

　es是js的规范标准

　let

　　特点：
　　1.有全局和函数作用域,以及块级作用域(用{}表示块级作用域范围)
　　2.不会存在变量提升
　　3.变量不能重复声明

　const

　　特点:　　

　　1.有块级作用域
　　2.不会存在变量提升
　　3.不能重复声明变量，

　　4.只声明常量,必须赋值,且定义之后不能更改

 

　模板字符串　　

　　tab键上面的 反引号

　　　　可以进行字符砖的拼接

　　　　 ${变量名}来插入变量值　　

　　　　let name = \'未来\';
　　　　let str = `我是${name}`

 

　数据的解构和赋值 ==>可用于数据的交换

　　数组的解构和赋值:

　　   let ary = [1,2,3]

　　   let [a,b,c] = ary;

　　对象的解构和赋值:

　　　let obj = {username:\'pan\', age:24};

　　　let { username: user, age:age }

 

　函数的扩展:

　　默认值参数(没给出要传的值时,选择默认值)

 

　　箭头函数

　　  ()=> {}

　　this的指向发生了改变

　　关于this指向,与vm实例没有任何关系。而是与箭头函数和普通函数的区别。总结两点： 1、es5的普通函数，this指向是指向了调用者，比如vue实例的方法（在methods中声明了一个方法）是由vue实例vm调用的，所以this指向vm。 2、箭头函数的this指向它的调用者所在的上下文，也就是vm实例所在的上下文（定义vm的父类），即window.

 

　es6中的类

　　　class关键字定义一个类,

　　　　必须要有constructor方式(构造方法),如果没有, constructor(){}

　　　　必须是使用new来实例化,否则报错

　　　\"\"

 

　　　类的继承 

　　　　必须在子类的constructor方法里写super方法

　　　　\"\"

　对象的单体模式

 　　\"\"

 

一介绍

　　 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

二,安装

    直接下载并用 < > 标签引入，Vue 会被注册为一个全局变量。

 　1.cdn下载方式:　

        链接到一个可以手动更新的指定版本号(不用下载)：

<  src=\"https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js\"></ >

　　　npm下载方式:

　　需要在命令行内下载(cmd界面)

npm install vue

　　

　　2. 引包  

  <  src=\'./vue.js\'></ >

 

　　3. 实例化:

//2.实例化对象
new Vue({
    el:\'#app\', //绑定标签

　　//数据属性 
　　data:{
        msg:\'黄瓜\',
        person:{
            name:\'wusir\'
        },
        msg2:\'hello Vue\'
    }
});

 

 

三,vue模板与常用指令

　　模板语法:(可以插入你想插入的内容,除了if-else if-else用三元运算代替)

<!--模板语法-->
<h2>{{ msg }}</h2>  //文本插值
<h3>{{ \'hhahda\' }}</h3>  //字符串
<h3>{{ 1+1 }}</h3>  //算术运算
<h4>{{ {\'name\':\'alex\'} }}</h4>  //字典
<h5>{{ person.name }}</h5>  //属性调用
<h2>{{ 1>2? \'真的\': \'假的\' }}</h2>  //逻辑判断
<p>{{ msg2.split(\'\').reverse().join(\'\') }}</p>  //方法执行

　　注意:

　　每个绑定都只能包含单个表达式;

　　模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

 

　　系统指令:

　　指令是带有 v- 前缀的特殊特性。指令特性的值预期是单个 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

　　v-text : 相当于innerText

　　v-html : 相当于innerHTML

　　v-if  和 v-show :　 　

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

　　v-for : 遍历列表

v-for可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM

 

　　v-bind: 可以绑定标签中任何属性 ,简写时可以省略 　

v-bind:src   等价于  :src

　　v-on: 可以监听js中所有事件  简写为@

v-on:click  等价于 @click

 

　　指令示范

<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
    <  charset=\"UTF-8\">
    < > </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <!--<style>-->
        <!--.box {-->
            <!--width: 200px;-->
            <!--height: 200px;-->
            <!--background-color: red;-->
        <!--}-->
    <!--</style>-->
        <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>
<div id = s1>
    <!--模板语言-->
    <h4>{{ obj }}</h4>
    <h2>{{ obj.name }}</h2>
    <p>{{ di_zhi }}</p>
</div>

<div id=\"s2\">
    <!--模板语言 插入文本值<h2>dsb</h2>-->
    {{ msg }}
    <!--相当于inner Text 展示字符串的文本样式<h2>dsb</h2>-->
    <div v-text=\"msg\"></div>
    <!--相当于inner Html 展示出msg原有的HTML样式 dsb-->
    <div v-html=\"msg\"></div>
</div>

<div id=\"s3\">
    {{ add(4,3)}}
    <!-- v-on 监听js中的所有事件 -->
    <button v-on:click=\"handleClick\">隐藏</button>
    <!-- 来回触发\'隐藏\'事件,isShow的值真假变换,v-show的渲染效果,也就来回变换\'-->
    <div class=\"box\" v-show=\"isShow\">火影忍者</div>
    <!--抽随机数,成立执行\'显示\',否则\'不显示\'-->
    <div v-if=\"Math.random() >0.5\">
        显示
    </div>
    <div v-else>
        不显示
    </div>
</div>

<div id=\"s4\">
    <!-- v-on 监听js中的所有事件,可以简写成 @ 如 @mouseenter -->
    <button v-on:mouseenter = \'handlerChange\' v-on:mouseleave = \'handlerLeave\'>切换颜色</button>
    <!-- v-bind 可以绑定标签中的所有属性 可以直接省略,但要留有空格 如: src-->
    <img :src=\"imgSrc\" :alt=\"msg\">
    <div class=\"box1\" :class=\"{active:isActive}\"></div>
</div>

<div id=\"s5\">
    <ul v-if=\"data.status == \'ok\'\">
        <!-- v-for的优先级最高 diff算法 -->
        <!-- item接收的是对象,index接收的是对象的索引 -->
        <li v-for = \'(item,index) in data.users\' :key=\"item.id\">
            <h3>{{ item.id }}***{{ item.name }}***{{ item.age }}</h3>
        </li>
    </ul>
    <!-- 接收的键key是在后面,接收的值value是在前面 -->
    <div v-for = \'(value,key) in person\'>
        {{ key }}***{{ value }}
    </div>
</div>

<!--引包-->
<  src=\"vue.min.js\"></ >
< >
    <!--实例化对象-->
    new Vue({
        // el: \'#s1\', //绑定标签
        // data:{
        //     //数据属性
        //     obj: {
        //         name: \'panda\',
        //         hobby:\'sleep\',
        //         sex:\'boy\'
        //     },
        //     di_zhi:\'北京\'
        // },

        // el:\'#s2\',
        <!--data中是一个函数 函数中一定要return一个对象 可以为空,但不能没有-->
        // data(){
        //     return{
        //         msg:\'<h2>dsb</h2>\'
        //         }
        //     }

        // el:\'#s3\',
        // data() {
        //     return {
        //         msg: \"<h2>alex</h2>\",
        //         num: 1,
        //         isShow: true //初始isShow 为true,
        //         }
        //     },
　　　　　　//在该组件中声明方法
        // methods: {
        //     add(x,y) {
        //         console.log(this.num);
        //         return x + y
        //     },
        //     handleClick() {
        //         //数据驱动
        //         this.isShow = !this.isShow; //点击 button按钮 触发该事件,执行此函数,即isShow为 flase
        //     }
        // }

        // el:\'#s4\',
        // data() {
        //     return{
        //         imgSrc:\'星空600_0.jpeg\',
        //         msg:\'沟渠\',
        //         isActive:true
        //     }
        // },
        // methods:{
        //     handlerChange(){
        //         this.isActive = !this.isActive;
        //         this.isActive = false;
        //     },
        //     handlerLeave() {
        //         this.isActive = true;
        //     }
        // }

        el:\'#s5\',
        data(){
            return{
                data:{
                    status:\'ok\',
                    users:[
                        {id: 1, name:\'潘\', age:\'24\'},
                        {id: 2, name:\'宋\', age:\'22\'},
                    ]
                },
                person:{
                    name:\'潘\'
                }
            }
        }
    })
</ >

</body>
</html>

 

　　watch和computed   (watch可以监听单个属性;computed 监听多个属性)

<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
    <  charset=\"UTF-8\">
    < > </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
</head>
<body>
    <div id=\"app\">
        <p>{{ msg }}</p>
        <button @click = \'clickHandler\'>修改</button>
    </div>
    <  src=\"vue.js\"></ >
    < >
        new Vue({
            el:\'#app\',
            data(){
                return {
                    msg:\"alex\",
                    age:18
                }

            },
            methods:{
                clickHandler(){
                    this.msg = \"wusir\"
                }
            },
            watch:{
                //watch单个属性，如果想监听多个属性 声明多个属性的监听
                \'msg\':function (value) {

                    console.log(value);

                    if (value === \'wusir\'){
                        alert(1);
                       this.msg = \'大武sir\'
                    }
                },
                \'age\' :function (value) {
                    
                }
            }
        })
    </ >
</body>
</html>




<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
    <  charset=\"UTF-8\">
    < > </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
</head>
<body>
<div id=\"app\">
    <p>{{ myMsg }}</p>
    <button @click=\'clickHandler\'>修改</button>
</div>
<  src=\"vue.js\"></ >
< >
    let vm = new Vue({
        el: \'#app\',
        data() {
            return {
                msg: \"alex\",
                age: 18
            }

        },
        created() {
            //定时器  ajax  库 function(){}
            setInterval(() => {

            })
        },
        methods: {
            clickHandler() {
                //this的指向就是当前对象
                this.msg = \"wusir\";
                this.age = 20;
            },
            clickHandler: function () {
                console.log(this);
            }

        },
        computed: {
            myMsg: function () {
                //业务逻辑

//                    计算属性默认只有getter方法
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })

    console.log(vm);
</ >
</body>
</html>

 

 　　数据驱动逻辑流程

\"\"

 

 表单输入绑定

　　v-model  双向绑定  只能应用像在input textare select

<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
    <  charset=\"UTF-8\">
    < > </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">

</head>
<body>
<div id=\"s1\">
    <label for=\"username\">用户名</label>
    <!-- v-model 双向绑定\'msg\'属性 即input标签内能够展示原有的msg值,但是当此处msg
    的值改变时,原有的msg值也跟着改变,就是相互可以共同作用于msg -->
    <input type=\"text\" v-model=\"msg\" id=\"username\">
    <!--在模板上显示 msg 值-->
    <p>{{ msg }}</p>
    <textarea placeholder=\"add multiple lines\" v-model=\"msg\"></textarea>

    <input type=\"checkbox\" id=\"checkbox\" v-model=\"checked\">
    <label for=\"checkbox\">{{ checked }}</label>
    <br>

    <!--多个复选框使用列表保存-->
    <input type=\"checkbox\" id=\"jack\" value=\"Jack\" v-model=\"checkedNames\" >
    <label for=\"jack\">Jack</label>
    <input type=\"checkbox\" id=\"song\" value=\"Song\" v-model=\"checkedNames\" >
    <label for=\"song\">Song</label>
    <br>
   <span >Check name:{{ checkedNames }}</span>
</div>
<  src=\"vue.js\"></ >
< >
    new Vue({
        el: \'#s1\',
        data() {
            return {
                msg:\'he\',
                //checked 初始值为false,当选中时变成true,在页面中取消或选中
                // 该属性,此处该属性的值也随着改变,即双向绑定.
                checked:false,
                checkedNames:[],
            }
        }
    })
</ >
</body>
</html>

 

 组件化开发

　　局部组件　

<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
    <  charset=\"UTF-8\">
    < > </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
</head>
<body>
<div id<

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章

热门标签
1阻止表单提交 1篇
2窗口 1篇
3关闭浏览器 1篇
4清除 1篇
5CDATA 1篇
6css文件 1篇
7光标位置 1篇
8坐标 1篇
9javascrpt 1篇
10!important 1篇
11超链接 2篇
12数字 1篇
13Enter 1篇
14自定义 1篇
15pdf 1篇
16嵌套 1篇
17Flexbox 1篇
18包含 1篇
19href 1篇
20自动填充 1篇
21html敏捷包 1篇
22enctype 1篇
23水平垂直居中 1篇
24百分比 1篇
25placeholder 1篇
26相同高度 2篇
27并排div 2篇
28样式 2篇
29innerHTML 1篇
30pdf文件 1篇
31html文件 1篇
32选择框 1篇
33屏幕可见区 1篇
34DOM元素 2篇
35按钮 2篇
36手机 1篇
您的足迹：