Vue2谷粒商城

最新推荐文章于 2024-05-17 13:52:13 发布

荭色海湾

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量215

点赞数 11

分类专栏：谷粒商城项目实战文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_53374893/article/details/136984817

版权

谷粒商城项目实战专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.初始化项目

npm init -y

2. 安装vue 2

npm install vue@^2

3.编写基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

1.基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}, 非常帅,有{{num}}个人为他点赞</h1>
        <input type="text" v-model = "num">
    </div>


    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
         Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
        let vm = new Vue({
            el: "#app",
            data: {
                name : "张三",
                num: 15
                
            }
        });
        //2.双向绑定    模型变换，试图变化


    </script>
</body>
</html>

事件处理

v-xx 指令

2. v-text /v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
          Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>
</head>
<body>
    <div id="root" >
           {{msg}}
           <span v-html="msg"></span>
           <span v-text="msg"></span>
    </div>
    <script>
        
        const app = new Vue({
          el: '#root',
          data: {
                msg :"<h1>Hello</h1>"

          },
          methods:{

          }
    
        });
    </script>
</body>
</html>

3.v-bind 绑定属性用的

给html标签的属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
          Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>
</head>
<body>
    <div id="root">
            <a v-bind:href="link">gogogo</a>
            <span v-bind:class="{active:isActive,'text-danger':hasError}">你好</span>
    </div>
    <script>
        
        const app = new Vue({
          el: '#root',
          data: {
           link:"http://www.baidu.com",
           isActive:true,
           hasError:true

          },
          methods:{

          }
    
        });
    </script>
</body>
</html>

4.v-model 双向绑定

默认会

5.v-on

6. v-for

7.v-if

8.v-show

区别就是， if是不渲染dom树而 show 是只是修改了diplay样式改成 none隐藏了而已实际还在dom树里

9.计算属性和 watch 侦听器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>
</head>

<body>
    <div id="root">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记; 价格:{{xyjPrice}} ,数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传; 价格:{{shzPrice}} ,数量：<input type="number" v-model="shzNum"></li>
            <li>总价格:{{totalPrice}}</li>
            <span v-show="s">{{msg}}</span>
        </ul>
    </div>
    <script>
            // watch 可以让我们监控一个值的变化。从而做出相应的反应
        const app = new Vue({
            el: '#root',
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.12,
                xyjNum: 0,
                shzNum: 0,
                msg:"",
                s:false

            },
            methods: {

            },
            computed: {
                totalPrice() {
                    console.log("执行了计算属性");
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
                }
            },
            watch:{
                xyjNum(newVal,oldVal){
                    console.log(`newVal : ${newVal}  ; oldVal : ${oldVal}`);
                    if(newVal>3){
                        this.s =true
                        this.msg = "输入的商品数量不能超过3";
                    }else{
                        this.s =false
                    }
                }
            }

        });
    </script>
</body>

</html>

10. 过滤器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>
</head>

<body>
    <div id="root">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}}
                 ==> {{user.gender | genderFilter}}
                 ==> {{genderF(user.gender)}}
                 ==> {{user.gender | genFilter}}
            </li>
        </ul>
    </div>
    <script>

            Vue.filter("genFilter", function(val){
                return  val==1?"男~~~":"女~~~"
            })

        const app = new Vue({
            el: '#root',
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 },
                ]

            },
            methods: {
                genderF(g){
                    return  g==1?"男":"女"
                }
            },
            filters:{
                //filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val){
                 return  val==1?"男":"女"
                }    

            }

        });
    </script>
</body>

</html>