1,Vue-ES6的经常使用语法-Vue经常使用指令

时间 2019-11-20

标签 vue es6 经常使用语法指令栏目 JavaScript 繁體版

原文原文链接

1,Vue-ES6的经常使用语法-Vue经常使用指令html

首页,https://www.cnblogs.com/GGGG-XXXX/p/9503208.htmlvue

1,ES6框架:https://www.cnblogs.com/GGGG-XXXX/articles/9439825.htmlsql

2,Vue指令:https://www.cnblogs.com/GGGG-XXXX/articles/9428761.html数据库

1 声明变量const let var

ES6之前 var关键字来声明变量，不管声明在何处都存在变量提高这个事情~~会提早建立变量~npm

做用域也只有全局做用域以及函数做用域~ 因此变量会提高在函数顶部或全局做用域顶部~django

let 关键字表示变量，const 表示常量。都是块级做用域，好比一个函数内部，代码块{}内部~app

2,模版字符串,框架

模版字符串,大小写切换键上面的``,ide

<body>
<div id="app">

</div>
<script>
    let ele=document.getElementById('app'); //先获取app这个做用域,
    let name='xiaoming';   //声明一个变量,
    ele.innerHTML=`
                <div>
                <ul>
                    <li>小明</li>
                    <li>小花</li>
                    <li>小强</li>
                    <li>${name}</li>  //使用${变量名} 替换内容,
                </ul>
            </div>
                `
</script>
</body>

3,函数:函数

箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。

最直观的三个特色

　　-- 不须要function关键字来建立函数

　　-- 省略return关键字

　　-- 继承当前上下文的this关键字（由于箭头函数的调用者是当前上下文，跟普通函数区别开） *************** this 跟最近的调用他的对象有关*********

箭头函数博客

https://www.cnblogs.com/fundebug/p/6904753.html

// 函数在哪里调用了 才决定this到底引用的是谁~~~
// 最后一个调用函数的对象才是传到函数里的上下文对象this~~~

console.log(this)

function test() {
    console.log(this)
};

let obj = {
    a: 1,
    test: test,
};

let obj2 = {
    b: 3,
    obj: obj,
};

obj.test();
test();
obj2.obj.test();

View Code

var Num=num=>num*3;
console.log(Num(3));

4,数据的解构相似于pytohn里面的**

<script>
   let obj={
       name:'xuge',
       age:77,
   }
    let array=['想,小鱼','过去','各学科']
    let {name,age}=obj;
   console.log(name)
   console.log(age)

    let [name1,name2,name3]=array
    console.log(name1)
    console.log(name2)
    console.log(name3)
</script>

类
-- class定义类
-- extends 继承
-- constructor 构造方法
-- 子类想要有this 在构造方法里执行super()

ES6 引入了关键字class来定义一个类，constructor是构造方法，this表明实例对象。

类之间经过extends继承，继承父类的全部属性和方法。

super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，

不然新建实例时会报错，由于子类没有本身的this对象。调用super()获得this，才能进行修改。

<script>
    class Animal{
        constructor(){
            this.type = "animal"
        }
        says(say){
            console.log(say)
        }
    }
    class Dog extends Animal {
        constructor(){
            super();
            this.type = "dog";
        }
        says(say){
            console.log(say)
        }
    }
    let dog = new Dog();
    dog.says("wangwang~~~~~")


</script>

View Code

Vue指令,

<!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">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
//div是做用域
<div id="app">  
    {{name}}
    {{hobby}}
</div>
<script>
    const app = new Vue({
        el: "#app", //获取到这个做用域,
        data: {
            name: "小黑",  //数据写在data里面,
            hobby: "学习"
        }
    })
</script>
</body>
</html>

Vue的指令

Vue的指令directives很像咱们所说的自定义属性，指令是Vue模板中最经常使用的功能，

它带有v-前缀，功能是当表达式改变的时候，相应的行为做用在DOM上。

v-on 点击,写为:@click

v-bind 绑定,写为冒号 :

data:存放方法的地方,

method:存放方法的地方,

v-text,v-html

<!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">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-text="name"></p>
    <p v-html="hobby"></p>

</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            name:'小明',
            hobby:`
            <ul>
                <li>学习</li>
                <li>烫头</li>
            </ul>
            `
        }
    })
</script>
</body>
</html>

v-text,v-html

v-for

<!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">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <p>他喜欢吃的食物</p>
    <ul>
        <li v-for="(food,index) in foods" :key="index">{{food}}{{index}}</li>
    </ul>
    <ul>
        <li v-for="item in array">{{item.name}}年龄是{{item.age}} 爱好是{{item.hobby}}</li>
    </ul>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           name:'小新新',
           foods:['豆汁','卤煮','驴打滚'],
           array:[{
               name:'旭哥',
               age:77,
               hobby:'睡觉',
           }]
       }
   })
</script>
</body>
</html>

v-for

v-if

<!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">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role=='vip'">
        <h2>xxx提供服务</h2>
    </div>
    <div v-else-if="role=='svip'">
        <h2>yyy提供服务</h2>
    </div>
    <div v-else>
        <h2>没有权限</h2>
    </div>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           role:'svip'
       }
   })
</script>
</body>
</html>

v-if-else

v-show

<!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">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
   <div v-show="is_show">
       <p>dlh</p>
   </div>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           is_show:true, //true也能够是换成数字,
       }
   })
</script>
</body>
</html>

View Code

v-on:

全写v-on:click,或者简写做@click

bind的简写,:

进行取值,设置值,app.is_green=false

这个示例代码,能够直接点击改变颜色

<!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">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .alex_color{
            width: 100px;
            height: 100px;
            border: solid 1px red;
        }
        .bg{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
   <p class="alex_color" :class="{bg:is_green}">alex</p>
    <!--<p>alex</p>-->
    <!--<button @click="my_click">点击戴绿</button>-->
    <button @click="my_click(567)">点击变色</button>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           is_green:false
       },
       methods:{
           my_click:function (data) {
               // alert(data)//先验证一下是否绑定了,
               // this.is_green=true;
               this.is_green=!this.is_green;  //!是直接取反,
           }
       }
   })
</script>
</body>
</html>

点击来回切换颜色

鼠标移入移出的效果,

<!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">
    <title>练习代码</title>
    <script src="./vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <div v-on="{mouseenter:OnMouseEnner,mouseleave:OnMouseLeave}">鼠标移入移出效果</div>
</div>
<script>
   const app=new Vue({
       el:'#app',
       methods:{
           OnMouseEnner:function () {
               console.log('XXXX')
           },
           OnMouseLeave:function(){
               console.log('YYYY')
           },
       }
   })
</script>
</body>
</html>

鼠标移入移出效果,

v-model

<!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">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="input">
    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>

    <select name="" v-model="girl">
        <option value="1">wangwei </option>
        <option value="2">liangshuang</option>
        <option value="3">jihuifang</option>
        <option value="4">liangying</option>
    </select>
    {{input}}
    {{article}}
    {{girl}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            input: "测试input",
            article: "还有article",
            girl: null,
        }
    })
</script>
</body>
</html>

v-model

后面加.lazy就是,输入框不聚焦的时候,才显示输入的内容,懒惰一下,.trim是去空格,.number是把值变为数字,由于默认的是字符串类型

指令修饰符

<!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">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model.trim="input">
    <!--<input type="text" v-model.lazy.number="input">-->
    <pre>{{input}}</pre>
    <!--{{typeof input}}-->
    {{input}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            input: "",
            article: "",
            girl: [1,2],
        }
    })
</script>
</body>
</html>

指令修饰符

自定义指令修饰符,

须要在控制台, 修改值,

<!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">
    <title>练习代码</title>
    <script src="../vue.js"></script>
    <style>
        .card{
            width: 100px;
            height: 100px;
            border:solid 1px greenyellow;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="card" v-duan="haoxin">

    </div>
    <button @click>点此换位置</button>
</div>
<script>
    Vue.directive('duan',function (el,binding) {
        console.log(el)
        console.log(binding)
        if(binding.value){
            el.style.position='fixed';
            el.style.bottom=0;
            el.style.right=0;
        }
    })
    const app=new Vue({
        el:'#app',
        data:{
            haoxin:false
        }
    })
</script>
</body>
</html>

自定义指令修饰符-1

如今点击能够把位置换回来,

<!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">
    <title>练习代码</title>
    <script src="../vue.js"></script>
    <style>
        .card{
            width: 100px;
            height: 100px;
            border:solid 1px greenyellow;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="card" v-duan.top.right="haoxin">

    </div>
    <button @click="my_click">点此换位置</button>
</div>
<script>
    Vue.directive('duan',function (el,binding) {
        console.log(el)
        console.log(binding)
        if(binding.value){
            el.style.position='fixed';
            // el.style.bottom=0;
            // el.style.right=0;
            for(let site in binding.modifiers)
                el.style[site]=0;
        }else{
            el.style.position='static'
        }
    })
    const app=new Vue({
        el:'#app',
        data:{
            haoxin:false
        },
    methods:{
            my_click:function () {
                this.haoxin=!this.haoxin
            }
    }
    })

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

自定义指令修饰符

计算属性 computed

<!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">
    <title>练习代码</title>
    <script src="../vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <table>
       <thead>
            <th>科目</th>
            <th>成绩</th>
       </thead>
       <tbody>
            <tr>
                <td>Python基础</td>
                <td><input type="text" v-model.number="Python"></td>
            </tr>
            <tr>
                <td>Django项目</td>
                <td><input type="text" v-model.number="django"></td>
            </tr>
            <tr>
                <td>数据库</td>
                <td><input type="text" v-model.number="sql"></td>
            </tr>
            <tr>
                <td>Linux</td>
                <td><input type="text" v-model.number="Linux"></td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{avg}}</td>
            </tr>
            <tr>
                <td>总成绩</td>
                <td>{{sum}}</td>
            </tr>
       </tbody>
    </table>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            Python:60,
            django:60,
            sql:60,
            Linux:60,
        },
    //此处是计算属性,计算属性是放入内存,读的时候快,
    computed:{
        sum:function () {
            return this.Python+this.django+this.sql+this.Linux
        },
        avg:function () {
            return this.sum/4
        },
    }
    })
</script>
</body>
</html>

计算属性

1,Vue-ES6的经常使用语法-Vue经常使用指令

1 声明变量const let var

Vue的指令

v-on 点击,写为:@click

v-bind 绑定,写为 冒号 :

data:存放方法的地方,

method:存放方法的地方,

全写v-on:click,或者简写做@click

bind的简写,:

进行取值,设置值,app.is_green=false

后面加.lazy就是,输入框不聚焦的时候,才显示输入的内容,懒惰一下,.trim是去空格,.number是把值变为数字,由于默认的是字符串类型

指令修饰符

自定义指令修饰符,

v-bind 绑定,写为冒号 :