Vue学习

最新推荐文章于 2024-05-27 09:56:21 发布

原创最新推荐文章于 2024-05-27 09:56:21 发布 · 942 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

Vue基础

Vue简介

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

尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js。

vscode

nodeJS: 下载 | Node.js 中文网 vsstudio: Visual Studio Code - Code Editing. Redefined 在文件夹中 cmd code . 则直接打开当前工程。安装 auto rename tag插件。安装code runner插件。安装open in brower插件。安装live server插件。 vetur 写vue必备插件 Vue 2 Snippets 写vue必备插件 axios插件 VueHelper vscode插件，vue，vue-router和vuex的代码提示 Path Intellisense 路径自动补全 Auto Close Tag 自动闭合标签 Beautify 格式化文件,保证正确的缩进 HTML CSS Support CSS提示插件 JavaScript (ES6) code snippets es6代码提示插件 VSCode Great Icons 给文件夹增加图标的插件

MVVM框架

model-view-viewmodel

Vue快速起步

1、添加Vue.js

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

2、在页面声明挂载点

 <!-- 
        在页面上声明一个dom对象
     -->
    <div id="app">
        <!-- 差值表达式 -->
        {{message}}
    </div>

3、生成Vue对象，描述挂载点和数据

<script>
        //使用js操作dom对象
        // document.getElementById("app").innerText="hello js dom world!";
        var vue = new Vue({
            //挂载点？
            el:"#app",
            data:{
                message:"hello vue world!"
            }
        });
    </script>

4、在挂载点中显示数据

 <!-- 差值表达式 -->
 {{message}}

基础指令

1、v-text

等同于jQuery中的text()或者js中的innerText属性

<span v-text="name">abc</span> <!-- 如果标签对之间有内容，则会被覆盖掉，如果值里有html标签，不会被解析 -->

2、v-html

等同于jQuery中的html()或者js中的innerHTML属性

<span v-html="name"></span>

3、v-on简写为@

v-on:事件种类=“事件处理方法”

<button v-on:click="show1()">点击</button>
<button @click="show1()">点击</button>

在Vue()中声明methods属性，这里放置Vue中调用的方法

4、v-bind: 绑定属性简写成：

<button v-on:click="jian()">-</button><input type="text" v-bind:value="num"  /><button v-on:click="jia()">+</button>
<button v-on:click="jian()">-</button><input type="text" :value="num"  /><button v-on:click="jia()">+</button>

小案例

<!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.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <font>abc</font>
        <button v-on:click="jian()">-</button><input type="text" :value="num"  /><button v-on:click="jia()">+</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num:0,
            colorVal:"red"
        },
        methods: {
            jian(){
                this.num--;
            },
            jia(){
                this.num++;
            }
        }
    });
</script>

事件修饰符

1、stop 解决事件冒泡问题

<div @click="a()">
        aaa
        <div @click="b()">
            bbb
            <button @click.stop="c()">ccc</button>
        </div>
    </div>

2、prevent将当前标签的默认功能取消

    <a href="https://www.baidu.com" @click.prevent="d()">百度</a>

    <form action="2.html">
        <button @click.prevent >submit</button>
    </form>

3、capture指定某一个事件在当前冒泡中先执行

<div @click.capture="a()">
        aaa
        <div @click.capture="b()">
            bbb
            <button @click="c()">ccc</button>
        </div>
    </div>

4、once只执行一次

 <a href="https://www.baidu.com" @click.prevent.once="d()">百度</a>

5、self（自己整理）

v-model双向绑定

没有使用双向绑定时：

只能从data到页面展示，如果这时，展示的位置，可以修改值，则其他显示该值的位置不能同步修改

使用双向绑定，就可以将页面值更新到data，从而使所用展现的data的地方都会进行数据更新。

<div id="app">
    <span>{{num}}</span>
    <input v-model="num">

    <input v-model="addr">
    <select v-model="addr">
        <option value="xian">西安</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num:0,
            addr:"beijing"
        }
    });
</script>

Vue绑定元素的class属性

1、v-bind:class

2、v-bind:style

<style>
    #div2{
        width: 400px;
        height: 400px;
    }
    .bg{
        background-color: aquamarine;
    }
    .bk{
        border: 1px solid red;
    }
</style>
<div id="app">
  
        <!-- 
            添加多个class
            <div id="div2" v-bind:class="['bg','bk']">123</div> 
        -->
        <!-- 
            使用三目运算选择添加哪个class
        -->
        <!-- <div id="div2" v-bind:class="isFlag?'bg':'bk'">123</div> -->
        <!-- 
            添加某个class或者不加
        -->
        <!-- <div id="div2" v-bind:class="{bg:flag}">123</div> -->
        <!-- 
            添加某个class或者不加2
        -->
        <!-- <div id="div2" v-bind:class="classObj">123</div> -->
        <!-- 
            添加style
        -->
        <!-- <div id="div2" v-bind:style="{backgroundColor:'blue',border:'10px solid red'}">123</div>  -->
        <!-- 
            将样式添加到vue变量中，使用变量添加样式
        -->
        <div id="div2" v-bind:style="[styleObj1,sytleObj2]">123</div> 
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
           flag:true,
           classObj:{bg:true},
           styleObj1:{backgroundColor:'red'},
           sytleObj2:{border:'10px solid green'}
        }
    });
</script>

v-for

<div id="app">
    <!-- 循环数组 -->
    <p v-for="i,index in wujiangs">{{i}}---------{{index}}</p>
    <!-- 循环对象中的属性 -->
    <!-- <p v-for="i in wujiang">{{i}}</p> -->
    <!-- 循环对象中的代名词 -->
    <!-- <p v-for="item,i in wujiang">{{item}}------------------{{i}}</p> -->
    <!-- 循环对象中的下标 -->
    <!-- <p v-for="(item,i,index) in wujiang">{{item}}------------------{{i}}--------------{{index}}</p> -->
    <!-- 循环对象数组 -->
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>武器</th>
        </tr>
        <tr v-for="wj,index in wujiangs2">
            <th>{{index+1}}</th>
            <th>{{wj.name}}</th>
            <th>{{wj.age}}</th>
            <th>{{wj.wq}}</th>
        </tr>
    </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
           wujiangs:["赵云","关羽","马超"],
           wujiang:{
               name:"张飞",
               age:40,
               wq:"丈八蛇矛"
           },
           wujiangs2:[
               {
                    name:"张飞",
                    age:40,
                    wq:"丈八蛇矛"
                },
                {
                    name:"黄忠",
                    age:70,
                    wq:"大炮"
                }
           ]
        }
    });
</script>

v-if、v-show

<div id="app">
   <input v-model="age" />
   <!-- <span v-if="age>=60">老年</span>
   <span  v-else-if="age>=18">青年</span>
   <span  v-else>少年</span> -->
   <span v-show="age>=60">老年</span>
   <span  v-show="age>=18&&age<60">青年</span>
   <span  v-show="age<18">少年</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
           age:25
        }
    });
</script>

v-if与v-show区别
vshow指令的元素始终会被渲染到HTML
它只是简单地为元素设置CSS的style属性。当不满足条件的元素被设
置style="display:none"样式
vif指令满足条件是，会渲染到html中，不满足条件时，是不会渲染到html中的
v-if与v-show应用场景
vif 指令有更高的切换消耗
vif当条件成立的时候会将元素加上，不成立的时候，就会移除dom，
并且内部的指令不会执行
vshow 指令有更高的初始渲染消耗
vshow只是简单的隐藏和显示
el: '#app',
data: {
message: 'Hello hello 你好 Vue!',
age:28
}
})
</script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<div id="app">
{{ message }}<br>
<h1 v-show="isshow">表达式为真你就能看到我</h1>
<h1 v-show="age>18&&age<30">成年</h1>
<h1 v-if="age>18&&age<30">成年</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello hello 你好 Vue!',
isshow: true,
age:14
}
})
</script>经验：如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变用v‐if 较好