Vue基本使用

Vue

Vue是遵循MVVW架构模式实现的前端框架

npm导入路径：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js

MVVM架构 Model数据 View模板 ViewModel处理数据

ES6的常用语法：

变量的定义，var，let，const

Var 变量的提升，函数作用域全局作用域，重新定义不会报错，可以重新赋值
let 块级作用域 { }，重新定意会报错，可以重新赋值
const 定义不可修改的常量，不可以重新赋值

箭头函数的this取决于当前的上下文环境：类似于python的匿名函数

this指当前函数最近的调用者，距离最近的调用者

解构：
字典解构 {key,key,...} 注：要使用key才行
数组结构 [x,y,.....]

    let obj = {
        a:1,
        b:2
    };
    let hobby = ["吹牛", "特斯拉", "三里屯"];
    let {a,b} = obj;
    let [hobby1,hobby2,hobby3] = hobby;
    console.log(a);
    console.log(b);
    console.log(hobby1);
    console.log(hobby2);
    console.log(hobby3);

Vue的核心思想是数据驱动视图

Vue的常用指令

v-text：获取文本内容

v-html：获取html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-text="name"></h2>
    <h3 v-text="age"></h3>
    <div v-html="hobby"></div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        name:"PDD",
        age:18,
        hobby:"<ul><li>学习</li><li>刷剧</li><li>Coding</li></ul>"
    }
});
</script>
</body>
</html>

v-for：循环获取数组

v-for：循环获取字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li>
        <li v-for="(item,index) in one" :key="index">
            {{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}
        </li>
    </ul>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        course_list:["classname","teacher","student"],
        one:[{name:"eric",age:"18",hobby:"music"},
            {name:"bob",age:"18",hobby:"dance"}]
    }
})
</script>
</body>
</html>

v-bind：自定制显示样式，动态绑定属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_app{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="{my_app:is_show}">
    </div>
    <img :src="my_src" alt=""> <!--  v-bind: 可以简写为 : -->
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        is_show:true, //true表示显示style样式，false不显示style样式
        my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg"
    }
})
</script>
</body>
</html>

v-on@事件名：事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-on@click只会执行一次，是在第一次进入页面的时候，@click会循环执行 -->

    <button @click="my_click('hello')" v-on="{mouseenter:my_enter,mouseleave:my_leave}">
        点击弹窗
    </button>
<!--    <button @click="my_click('hello')" @mouseenter="my_enter",@mouseleave="my_leave">  繁琐写法-->
<!--        点击弹窗     -->
<!--    </button>    -->
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{},
    methods:{
        my_click:function(x){
            alert("luke" + x)
        },
        my_enter:function(){
            console.log("鼠标移入事件")
        },
        my_leave:function(){
            console.log("鼠标移出事件")
        }
    }
})
</script>
</body>
</html>

v-if：条件判断
v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role == 'admin' ">管理员你好</div>
    <div v-else-if="role == 'hr' ">查看简历</div>
    <div v-else>没有权限</div>

</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        role:"admin"
    },
    methods:{}
})
</script>
</body>
</html>

v-show：布尔值类型判断

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="admin">管理员你好</div>
    <div v-show="hr">查看简历</div>
    <div v-show="others">没有权限</div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        admin:true,
        hr:false,
        others:false,
    },
    methods:{}
})
</script>
</body>
</html>

综合案例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="admin">管理员你好</div>
    <div v-show="hr">查看简历</div>
    <div v-show="others">没有权限</div>
    <button @click="my_click">点击显示或隐藏</button>
    <div v-show="is_show">hello</div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        admin:true,
        hr:false,
        others:false,
        is_show:false
    },
    methods:{
        my_click:function(){
            this.is_show=!this.is_show
        }
    }
})
</script>
</body>
</html>

v-model：获取数据，标签的属性设置，获取其属性值，用户信息等，例如input，select等

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <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="username">
    {{username}}
    <hr>
    <textarea type="text" cols="30" rows="10" v-model="article">
        {{article}}
    </textarea>
    <hr>
    <select name="" v-model="choices">
        <option value="1">阿萨德</option>
        <option value="2">主线程</option>
        <option value="3">权威</option>
    </select>
    {{choices}}
    <hr>
    <select name="" v-model="choices_multiple" multiple>
        <option value="1">阿萨德</option>
        <option value="2">主线程</option>
        <option value="3">权威</option>
    </select>
    {{choices_multiple}}
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        username:"1234",
        article:"123456",
        choices:"",
        choices_multiple:['1']
    },
    methods:{}
})
</script>
</body>
</html>

v-model.lazy：失去光标绑定数据事件
v-model.lazy.number：数据类型的转换
v-model.lazy.trim：清除空格

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <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.lazy="username">
        {{username}}
    <hr>
    <!--  前端默认只显示一个空格，pre使数据原始化展示  -->
    <input type="text" v-model.lazy="username">
        <pre>{{username}}</pre>
    <hr>
    <!--    -->
    <input type="text" v-model.lazy.trim="username_trim">
        <pre>{{username_trim}}</pre>
    <hr>
    <input type="text" v-model.lazy.number="article">
    {{article}}
    {{typeof article}}
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        username:"1234",
        username_trim:"1234",
        article:"123456"
    },
    methods:{}
})
</script>
</body>
</html>

自定义指令

v-自定义的函数（指令）：自定制函数（指令）
Vue.directive（）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="my_box" v-pin.right.top="pinned"></div>
</div>
<script>
    Vue.directive("pin",function(el,binding){
        console.log(el); //指令的标签元素
        console.log(binding); //指令的所有信息
        let adr = binding.modifiers;
        if(binding.value){
            //定位到浏览器的右下角
            el.style.position = "fixed";
            // el.style.right='0';
            // el.style.bottom='0';
            //指令修饰符定位
            for (let posi in adr){
                el.style[posi]=0;
            }
        }else{
            el.style.position = "static";
        }
    });
    const app = new Vue({
        el:"#app",
        data:{
            pinned:true
        }
    })
</script>
</body>
</html>

方法集合

v-text
v-html
v-for
v-if v-else-if v-else
v-bind 绑定属性
v-on 绑定事件
v-show display
v-model 数据双向绑定
input
textarea
select
指令修饰符
.lazy
.number
.trim
自定义指令
Vue.directive（'指令名'，function(el,参数binding){ }）
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifiers 指令修饰符组成的对象

posted @ 2020-03-11 17:16 HashFlag 阅读(400) 评论(0) 编辑收藏举报

刷新页面返回顶部