day4 Vue基础

1.安装配置

项目导入vue.js//类似jquery.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//不建议这样用 现在开发基本用npm来管理依赖

代码提示插件 Vue 2 Snippets

npm管理
1.新建项目文件夹 npm init -y 生成package.json文件 说明是npm项目
2. npm install vue 在node_modules里加了vue依赖
<script src="./node_modules/vue/dist/vue.js"></script>

2.单向绑定

注意：{{name}}只能放在标签体中 如<a href="{{name}}">xx</a>是错误的

想绑定标签的属性要用v-bind 如 <a v-bind:href="name">xx</a>也可以简化<a :href="name">xx</a>

 

标签属性中若有多个配置时 如<span style="color:red;font-size:10px">xx</span>

改成<span :style="{color:c1,font-size:f1}">xx</span>  data中c1:red,f1:10px  要特别注意的是其中v-bind绑定属性写法是个对象{}

<div id="app">
        <h1>{{name}},你好</h1>
        <h1>{{age}}岁</h1>
    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                name:"张三",
                age:10
            }
        })
    </script>
//new Vue中定义 el绑定选择器 data定义数据 与小程序的绑定方式一样

3.双向绑定 v-model

 <div id="app">
        <input type="text" v-model="num">
        <h1>{{name}},你好</h1>
        <h1>人数{{num}}</h1>
    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                name:"张三",
                num:10
            }
        })
    </script>
//单向绑定是js中变量改变html中也变
//双向绑定还包含了html中改变js变量也变

4.事件

 <div id="app">
        <button v-on:click="num++">++</button>
　　　　 <button v-on:click="cancls">- -</button>
        <h1>人数{{num}}</h1>
</div>   
<script>
      new Vue({

            el:"#app",
            data:{
                num:10
            },

　　　　　　　　methods:{

               cancls(){

                   this.num--;

               }

            }

        })
    </script>
//绑定事件v-on: 
//也可以简写 如v-on:click 等价于@click

5.v-for

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

<ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息：v-for="item in items" -->
               当前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>            
        </ul>

6.监听

watch监控变量且变量必须在data中
computed用于监控多个变量或对象

例子
//watch可以让我们监控一个值的变化。从而做出相应的反应。
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            watch: {
                xyjNum(newVal,oldVal){
                    if(newVal>=3){
                        this.msg = "库存超出限制";
                        this.xyjNum = 3
                    }else{
                        this.msg = "";
                    }
                }
            },
        })

7.过滤器

  <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    <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 src="../node_modules/vue/dist/vue.js"></script>

    <script>
    //过滤器案例1
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
        //过滤器案例2
            filters: {
                 filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
    

8.组件

当某部分页面经常被使用时可以考虑用组件components
组件与Vue实例相比多了template少了el(组件不需要el因为不需要指定某个选择器) template就是html页面模板

<body>

    <div id="app">
        <button v-on:click="count++">我被点击了 {{count}} 次</button>

        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>

        <button-counter></button-counter>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>


    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //2、局部声明一个组件
        const buttonCounter = {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };

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

9.生命周期钩子函数

了解触发时机 忘记查

　　　　　　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);
            }

10.vue模块化开发

模块开发简单笔记
1.主文件是src/main.js
2.配置文件config/index.js
3.组件一般统一放在src/components下
    组件一般有3个元素 data()是方法而不是对象
<template> </template>
<script>
        export default {
            data() {
                return {
                name: '名字'
                }
        }
    }
</script>
<style> </style>  
4.在路由配置文件router/index.js中导入组件 如import Hello from '@/components/Hello' 注意组件在src中带@

　　路由中配置如下：{

      path: '/hello',

      name: 'Hello组件',

      component: Hello

    }

 如果路由中还嵌套一个路由的话加上children元素 

　　例：

　　{

      path: '/el_container',

      name: '布局',

      component: el_container,

      children: [{

        path: '/table',

        name: 'table组件',

        component: el_table

      }]

    }

 

　　最后把组件放置的位置处写上

<router-view></router-view>

 

vscode代码模板生成方式：文件-首选项-用户片段-文件输入vue-输入以下代码

// https://www.cnblogs.com/songjilong/p/12635448.html
{
    "Print to console": {
        "prefix": "vue", //配置后vscode输入vue后就能弹出该模板
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
    "prefix": "httpget",
    "body": [
        "this.\$http({",
        "url: this.\$http.adornUrl(''),",
        "method: 'get',",
        "params: this.\$http.adornParams({})",
        "}).then(({ data }) => {",
        "})"
    ],
    "description": "httpGET请求"
    },
    "http-post请求": {
    "prefix": "httppost",
    "body": [
        "this.\$http({",
        "url: this.\$http.adornUrl(''),",
        "method: 'post',",
        "data: this.\$http.adornData(data, false)",
        "}).then(({ data }) => { });" 
    ],
    "description": "httpPOST请求"
    }
}

11.整合Element ui

https://element.eleme.cn/#/zh-CN/component

npm i element-ui -S  //引入element依赖 

main.js中引入element组件及样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

可以在项目中直接使用element组件了 参考element官方文档