谷粒商城-基础篇-DAY2-前端基础VUE

QQQ
313 阅读2分钟

一、MVVM思想

M：Model，模型，包括数据和一些基本操作 V：View，视图，页面渲染结果 VM：View-Model，模型与视图间双向操作

二、实例

1.环境准备

  1. 根目录 npm init -y 初始化项目
  2. 导入vue：npm install vue@2.6.10

2.Hello World

  1. 创建VUE实例，关联页面的模板
  2. 将数据渲染到关联的模板，响应式的
  3. 指令来简化dom的一些操作
  4. 声明方法做复杂操作,methods里面可以封装方法
<!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">
        <h1>{{name}}，非常帅</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三"
            }
        });
    </script>
</body>
</html>

3.基本语法

1.给标签体赋值:v-html、v-text

<body>
    <div id="app">】
        <!-- 差值表达式只能用在标签体 -->
        {{msg}} 
        <span v-html="msg"></span>
        <span v-text="msg"></span>
        <a href="">gogogo</a>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>Hello</h1>",
                link:"http://baidu.com"
            }
        })
    </script>
</body>

2.给html标签属性绑定:v-bind

<body>
    <!-- 给html标签属性绑定 -->
    <div id="app">
        <a v-bind:href="link">gogogo</a>
        <span v-bind:style="{color: color1,fontSize:size}">你好</span>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                link:"http://www.baidu.com",
                color1:`red`,
                size:'36px'
            }
        })
    </script>
</body>

3.双向绑定（表单）:v-model

<body>
    <!-- v-model一般用于表单项 -->
    <div id="app">
        精通的语言：
        <input type="checkbox" v-model="language" value="java">java<br/>
        <input type="checkbox" v-model="language" value="js">js<br/>
        <input type="checkbox" v-model="language" value="css">css<br/>
        选中了{{language}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                language:[]

            }
        })
    </script>
</body>

4.事件绑定：v-on

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <v id="app">
                
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <!-- 简写：@绑定事件 -->
        <button @click="cancle">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>


        <!-- 事件修饰符 -->
        <!-- once只可点击一次 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <!-- 阻止默认行为-不跳转，只弹窗 -->
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>

        <!-- 按键修饰符： -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctv>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancle(){
                    this.num--;
                },
                hello(){
                    alert("点击了")
                }
            }
        })
    </script>
</body>
</html>

5.遍历for

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

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

6.if判断

<body>
    <!-- 
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

7.else if 判断

<body>
    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>

4.计算属性和监听器

计算器

<body>
    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
            <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

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

过滤器

<body>
    <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 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>

        // 全局过滤器
        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 }
                ]
            },
            filters: {
                //// filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

5.组件化

<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>

6.生命周期及钩子函数

1. 生命周期

每个Vue实例被创建时都要经过一系列的初始化过程：创建实例、装载模板、渲染模板等等。Vue为生命周期中每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期，对应的函数就会被触发调用。

三、Vue脚手架开发

1.全局安装webpack
npm install webpack -g
2.全局安装vue脚手架
npm install -g @vue/cli-init
3.初始化vue项目
vue init webpack appname
vue脚手架使用webpack模板初始化一个appname项目
4.启动vue项目
项目的package.json中邮scripts，代表我们能运行的命令
npm start = npm run dev 启动项目
我直接启动会报错，这时候 npm install后，可以启动
npm run build 将项目打包

四、整合element ui

1. 安装
sudo npm i element -ui
2. 项目导入
main.js文件中
avatar
文章
阅读
粉丝