前端Vue基础

前言：VSCode使用

插件：
open in browser 右键选择浏览器直接打开页面。
live server 修改文件保存后，页面自动刷新。右键：open with live server
Vue 2 Snippets和VueHelper。vue的代码提示插件，安装其中一个就行。
Vetur 。方便代码编写等。

1. 初始化vue项目

a. 初始化项目：npm init -y 。完成后文件夹会生成package.json，代表npm管理的项目。
b. 安装vue依赖：npm install vue 。安装完成之后文件内会出现node_modules\vue*
c. 引入vue.js

<script src="./node_modules/vue/dist/vue.js"></script>

2. vue简单测试使用

<script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model = "num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancal">取消</button>
        <h1>{{name}},是好人,有{{num}}人这样认为</h1>
    </div>
    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            el:"#app", //绑定元素
            data:{     //封装数据
                name:"fangkk",
                num: 1 //双向绑定
            },
            methods: { //封装方法
                cancal() {
                    this.num--;
                },
            },
        });
        //2、双向绑定，模型变化，视图变化，反之亦然
        //3、事件按钮
        //v-xx:指令
        //1.创建vue实例，关联页面的模板（id=el），将自己的数据（data）渲染到关联的模板，响应式的。
        //2.指令来简化对dom的一些操作。
        //3.声明方法来做更复杂的操作。methods里面可以封装方法。
    </script>

3. 插值表达式和v-html

a. 花括号
格式：{{表达式}}
说明：

• 该表达式支持JS语法，可以调用JS内置函数（必须有返回值）。
• 表达式必须有返回结果/例如1+1，没有结果的表达式不允许使用，如：let a=1+1。
• 可以直接获取vue实例中定义的数据或函数。
• 插值表达式只能写在标签体里面。

b. 插值闪烁
{{表达式}}存在插值闪烁，网速慢的情况下，页面会先展示{{}}，后展示完整页面。但目前我测试来讲，未发现，可能已经被优化。
v-html和v-test不会出现插值闪烁。
c. 代码示例

    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        {{msg}} 
        {{1+1}}
        {{hello("fangk")}}
        <span v-html="msg"></span>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                msg:"<h1>hello</h1>"
            },
            methods: {
                hello(name) {
                    return "hello "+name;
                },
            },
        });
        //插值表达式：
        //1、表达式必须有返回结果。
        //2、可以直接获取vue实例中定义的数据或函数。
        //3、插值表达式只能写在标签体里面，如果标签属性中需要使用则需v-bind，下节介绍
    </script>

4. v-bind

    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <a href="https://www.baidu.com">跳转1</a>
        <a v-bind:href="link">跳转2</a>
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
        :style="{color:color1,fontSize:size}"
        >你好</span>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                link:"https://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:"blue",
                size:"36px"
            }
        });
        //单项绑定，页面修改不会影响vue中的数据，vue数据修改可以影响页面展示。
        //双向绑定，v-model
    </script>

5. v-model

    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 表单项，自定义组件 -->
    <div id = "app">
        精通的语言：</br>
        <input type="checkbox" v-model="language" value="Java">java </br>
        <input type="checkbox" v-model="language" value="PHP">PHP </br>
        <input type="checkbox" v-model="language" value="Python">Python </br>
        <!-- JS提供数组.join()方法，用指定内容连接 -->
        选中了：{{language.join(",")}} 

    </div>

    <script>
        let vm =new Vue({
            el:"#app",
            data:{
                language:[]
            },
            methods:{

            }
        });
    </script>

6.v-on

    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <!-- 事件中直接写js片段 -->
        <button v-on:click="num++">点赞</button>
        <!-- 事件中指定一个回调函数，必须是Vue实例中定义的函数 -->
        <button @click="cancal()">取消</button>

        <h1>有{{num}}个赞</h1>

        <!-- 事件修饰符 -->
        <!-- 
            在事件处理程序中调用‘event.preventDefault()’或event.stopProoagation是非常常见的需求。尽管我们可以在方法中轻松实现这点，
            但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
            为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的：
            1.‘.stop’，阻止事件冒泡到父元素。
            2.‘.prevent’，阻止默认事件发生。
            3.‘.capture’，使用事件捕获模式。
            4.‘.self’，只有元素自身触发事件才执行。冒泡或捕获的都不执行。
            5.‘.once’，只执行一次
         -->
        <!-- 小div被点击后，会弹出两次窗口，因为事件冒泡 -->
        <div style="border: 1px solid red;padding:20px" v-on:click="hello()">
            大div
            <div style="border: 1px solid blue;padding:20px" @click.stop="hello()">
                小div </br>
                <a href="http://www.baidu.com" @click.prevent>去百度</a>
            </div>
        </div>

        <!-- 按键修饰符： -->
        <!-- 
            在监听键盘事件时，我们经常需要检查常见的键值。Vue允许为‘v-on’在监听键盘事件时添加按键修饰符：
            例如<input v-on:keyup.13="hello()" > ,只有keyCode是13-enter时调用hello函数
            记住所有的keyCode比较困难，Vue为最常用的按键提供了别名：
            .enter  .tab  .esc .space(空格) .up .down(下键) .left .right 
            .delete(捕获删除和退格键)
         -->
        <input type="text" v-model="num" @keyup.up="num+=2" @keyup.down="num-=2"></br>
        提示：
        <!-- 组合按键 -->
        <input type="text" @keyup.alt.enter="hello()"> </br>
        <input type="text" @click.alt.ctrl="hello()">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                cancal(){
                    this.num--;
                },
                hello(){
                    alert("点击了");
                }
            }
        });
    </script>

二、计算属性、侦听器、过滤器

1. 计算属性和侦听器

    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <!-- 某些结果时基于之前数据实时计算出来的，我们可以利用计算属性 -->
        <ul>
            <li>西游记，价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传，价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"></li>
            <li>总价：{{totalNum}}</li>
            <li>{{msg}}</li>
        </ul>
    </div>
    <script>
        let ve = new Vue({
            el:"#app",
            data:{
                xyjPrice: 10.00,
                shzPrice: 10.00,
                xyjNum: 1,
                shzNum: 1,
                msg:""
            },
            //计算属性computed
            computed: {
                totalNum(){
                    return this.xyjPrice*this.xyjNum+this.shzPrice*this.shzNum;
                }
            },
            //watch可以让我们监控一个值的变化，从而做出相应的反应。
            watch: {
                xyjNum:function(newValue, oldValue) {
                    if(newValue>=3){
                        this.msg = "库存超出限制";
                        this.xyjNum=3;
                    }else{
                        this.msg="";
                    }
                },
            },

        });
    </script>

2. 局部过滤器和全局过滤器

    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}}==>{{user.name}}==>{{user.gender==1?"男":"女"}}==>{{user.gender | genderFilter}}
                ==>{{user.gender | gFilter}}
            </li>
        </ul>
    </div>
    <script>
        // 全局过滤器
        Vue.filter("gFilter",function(val){
            if(val==1){
                return "男~~~";
            }else{
                return "女~~~";
            }
        })

        let vm = new Vue({
            el:"#app",
            data:{
                userList:[
                    {id:1,name:"fangk",gender:1},
                    {id:2,name:"yuanh",gender:0}
                ]
            },
            //过滤器常用来处理文本格式化的操作，过滤器可以用在两个地方：双花括号插值和v-bind 表达式
            filters:{
                //// filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(gender){
                    if(gender==1){
                        return "男";
                    }else{
                        return "女";
                    }
                }
            }
        });
    </script>

三、组件化

  在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分，例如坑你会有相同的头部导航。
  但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
  在vue里，所有的vue实例都是组件。

    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <button v-on:click="count++">我被点击了{{count}}次</button>
        <counter></counter>
        <button-counter></button-counter>
    </div>
    <script>
        //1.全局声明注册一个组件
        Vue.component("counter", {
            template: '<button v-on:click="count++">我被点击了{{count}}次</button>',
            data() {
                return {
                    count: 1
                }
            }
        });
        /*
        1.组件其实也是一个vue实例，因此它在定义时也会接收：data,methods,生命周期函数等。
        2.不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
        3.但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板。
        4.全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
        5.data必须是一个函数，不再是一个对象
        */
        //2.局部声明一个组件
        const buttonCounter = {
            template: '<button v-on:click="count++">我被点击了{{count}}次~~~</button>',
            data() {
                return {
                    count: 1
                }
            }
        }

        let vm = new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components:{
                'button-counter':buttonCounter
            }
        });
    </script>

四、生命周期钩子函数

  每个vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数（监听函数）。

    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}，有{{num}}个人点赞</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>