Vue基础入门笔记汇总

时间 2019-11-19

标签 vue 基础入门笔记汇总繁體版

原文原文链接

Vue学习笔记javascript

一、 vue是什么？css

Vue是一套用于构建用户界面的渐进式框架（渐进式框架：分层设计，即你须要使用一种框架或者工具的时候，引入便可使用他的大部分功能，须要使用其余功能的时候只须要添加相应功能插件【作加法】，相似于Jquery，由简单到复杂，优势：节省成本https://www.zhihu.com/question/51907207）。与其余大型框架不一样的是，Vue被设计为能够自底向上逐层应用。Vue的核心层只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue也彻底可以为复杂的单页应用提供驱动。html

二、 Hello Vue！搭建一个Vue框架；vue

　　1> 定义Viewjava

　　2> 定义Modeljquery

　　3> 建立一个Vue实例或"ViewModel"，它用于链接View和Modelnpm

var app = new Vue({
    el: '#app', 
    data: {
        message: 'Hello Vue!',
        name: 'Hello Vue!'
    },
//    template: '<h1 style="color:red">我是选项模板2<br />{{ name }}</h1>',
//    template: '#demo3',
    /* el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子
     * 能够简单的理解为：就是渲染dom节点的时候使用
     * vue加载完成后回调函数
     * 运行AJAX事件请求数据
     */
    mounted: function () {
        //延迟回调
        this.$nextTick(function () {
//            $("#message").val("Hello Vue,I am message!");
//            $("#name").val("Hello Vue,I am name!");
            app.$data.message = "Hello Vue,I am message!";
            app.$data.name = "Hello Vue,I am name!";
//            alert(app.$data.name);
            var i = 0;
            var interIndex = setInterval(function(){
                app.$data.name = (i++) + 1;
            }, 1000);
        });
        //app.$data.name = "Hello World1!";//会报错：app对象不存在
//        alert($("#temp").is(':hidden'));
    },
    methods: {//自定义方法
      
    }
})

三、数据驱动？app

Vue是数据驱动的，那什么叫作数据驱动，举个例子，咱们电脑装了一个显卡，电脑是怎么控制的呢，就是由于驱动，电脑经过显卡驱动控制显卡，同理，vue至关于驱动，元素至关于显卡，咱们不直接操做元素，咱们只须要操做vue实例用以操做元素，好比咱们须要给一个id为tem的dom元素赋值，Jquery的作法是$(“#tem”).val(‘aaa’)，直接操做元素用以赋值，而vue的作法是它会建立一个实例直接将数据与dom进行绑定，数据与dom元素将保持同步，当数据变动，dom也会随之更新；（dom元素随数据改变而改变，那数据会不会随dom元素改变而改变。这单向绑定，仍是双向绑定？）引出MVVM模式

四、 MVVM模式（Model-View-ViewModel）框架

MVVM模式自己是实现了双向绑定的，在Vue.js中可使用v-model指令在表单元素上建立双向数据绑定。dom

下图不只归纳了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是做用于某一个HTML元素上的，这个元素能够是HTML的body元素，也能够是指定了id的某个元素。

当建立了ViewModel后，双向绑定是如何达成的呢？

首先，咱们将上图中的DOM Listeners和Data Bindings看做两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮咱们监测页面上DOM元素的变化，若是有变化，则更改Model中的数据；

从Model侧看，当咱们更新Model中的数据时，Data Bindings工具会帮咱们更新页面中的DOM元素。

五、生命周期

六、经常使用指令

v-if指令

　　年龄：<span v-if="age > 20">{{ age }}</span>
    　　 <span v-else-if="age > 18">{{ age+"(未成年)" }}</span>
    　　 <span v-else>{{ age+"(小孩)" }}</span><br />

v-show指令

　　<!-- v-if 直接删除元素; v-show 修改style属性：display:none; -->
　　性别：<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br />

v-for指令

　　<table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>性别（我是简写）</th>
            <th>年龄</th>
        </tr>
　　　　 <!-- temp 1 -->
        <tr v-for="emp in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <!-- b-bind:attrbute="" 简写  :bind:attrbute="" -->
            <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
        </tr>
　　　　 <!-- temp 2 -->
　　　　 <tr v-for="(emp, index) in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
        </tr>
    </table>

v-bind指令

　　<td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
　　<!-- b-bind:attrbute="" 简写  :bind:attrbute="" -->
　　<td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>

v-on指令

    <button type="button" v-on:click="remove">删除</button>
    <!-- b-on:click="" 简写 @click="" -->
    <button type="button" @click="remove">删除（我是简写）</button

    <button v-on:click="removeByIndex(index)">删除</button>

七、写一个Demo

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础的VUE介绍</title>
<link rel="stylesheet" href="../assets/css/index.css">
<style type="text/css">
    html, body {width: 100%;}
    #app {width: 95%; margin: auto;}
    #app table {border-collapse: collapse;}
    #app table th,td {width: 200px; border: 1px #ccc solid; text-align: center;}
    #app .boy {background: blue;}
    #app .girl {background: red;}
</style>
</head>
<body>

<div id="app">
    <h1>v-if/v-else/v-show</h1>
    姓名：<span v-if="name.indexOf('某') >= 0">{{ name }}</span>
        <span v-else="name.indexOf('某') < 0">{{ name+"(缺某)" }}</span><br />
    年龄：<span v-if="age > 20">{{ age }}</span>
        <span v-else-if="age > 18">{{ age+"(未成年)" }}</span>
        <span v-else>{{ age+"(小孩)" }}</span><br />
    <!-- v-if 直接删除元素; v-show 修改style属性：display:none; -->
    性别：<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br />
    
    <hr /><h1>v-on/v-model</h1>
    姓名：<input type="text" id="name" v-model="name" /> <br />
    性别：<input type="radio" name="sex" value="男" v-model="sex" /> 男
        <input type="radio" name="sex" value="女" v-model="sex" /> 女 <br />
    年龄：<input type="text" id="age" v-model="age" /><br />
    <input type="button" value="添加" @click="save"/>
    
    <hr /><h1>v-for(1)</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>性别（我是简写）</th>
            <th>年龄</th>
        </tr>
        <tr v-for="emp in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <!-- b-bind:attrbute="" 简写  :bind:attrbute="" -->
            <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
        </tr>
    </table>
    
    <hr /><h1>v-on</h1>
    <button type="button" v-on:click="remove">删除</button>
    <!-- b-on:click="" 简写 @click="" -->
    <button type="button" @click="remove">删除（我是简写）</button>
    
    <hr /><h1>v-for(2)</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操做</th>
        </tr>
        <tr v-for="(emp, index) in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
            <td><button v-on:click="removeByIndex(index)">删除</button></td>
        </tr>
    </table>
</div>

<div style="height: 200px; width: 100%; text-align: center; margin-top: 200px;"><h1>看不见我，看不见我，看不见我</h1></div>
</body>
<script type="text/javascript" src="../assets/js/vue/dist/vue.js"></script>
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>

JS（index.js）

var app = new Vue({
    el: '#app', 
    data: {
        name: '金某某',
        age: 24,
        sex: '男',
        
        employees: [{
            name: '金某某1',
            age: 24,
            sex: '男',
        },{
            name: '金某某2',
            age: 21,
            sex: '女',
        },{
            name: '金某某3',
            age: 23,
            sex: '男',
        }]
    },
    mounted: function () {
        //延迟回调
        this.$nextTick(function () {
            
        });
        Array.prototype.deleteByIndex = function(delIndex){
            var temArray=[];
            for(var i=0;i<this.length;i++){
                if(i!=delIndex){
                    temArray.push(this[i]);
                }
            }
            return temArray;
        }
    },
    methods: {//自定义方法
        remove: function(){
            if(app.$data.employees.length > 0)
                app.$data.employees = app.$data.employees.deleteByIndex(app.$data.employees.length - 1);
            else alert("列表被被删完了 :(")
        },
        removeByIndex: function(index){
            app.$data.employees = app.$data.employees.deleteByIndex(index);
        },
        save: function(){
            var emp = {};
            emp.name = app.$data.name;
            emp.age = app.$data.age;
            emp.sex = app.$data.sex;
            app.$data.employees.push(emp);
        }
    }
})

敬谢：

http://www.javashuo.com/article/p-thghdyau-k.html
https://cn.vuejs.org/v2/guide/

Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>