谷粒商城笔记三vue

Posted 2021-12-31 今夜月色很美

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷粒商城笔记三vue相关的知识，希望对你有一定的参考价值。

1、vue介绍

1.1、入门案例

1.1.1安装vue

官网文档提供了 3 中安装方式：

直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式。
通过 npm 安装。这种方式也是官网推荐的方式，需要 nodejs 环境。

# 最新稳定版
$ npm install vue

1.1.2、创建示例项目

新建文件夹 hello-vue，并使用 vscode 打开
使用 vscode 控制台，npm install -y，项目会生成 package-lock.json 文件，类似于 maven 项目的 pom.xml 文件。
使用 npm install vue，给项目安装 vue；项目下会多 node_modules 目录，并且在下面有一个 vue 目录。

1.1.3、事件处理

v-xx：指令
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
2、指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。methods里面可以封装方法。

v-on是按钮的单击事件：

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">
            点赞
        </button>
        <!-- 完整语法 -->
        <button v-on:click="minus">取消</button>
        <!-- 缩写 -->
        <button @click="minus">取消</button>
        <!-- 动态参数的缩写 -->
        <button @[event]="minus">取消</button>
        <h5>
            name，非常帅!!! 有num个人为他点赞
        </h5>
    </div>
</body>
<script>
    let vm = new Vue(
        el: "#app",
        data: 
            name: "张三",
            num: 5,
            event: "click"
        ,
        methods: 
            minus: function()
                this.num--
            
        ,
    )
</script>
</html>

在VUE中el,data和vue的作用:

el：用来绑定数据(是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div)；
data:数据，数据是一个对象，里面有很多属性，都可以渲染到视图中;
methods：用来封装方法，并且能够封装多个方法，如上面封装了minus方法。

1.2差值表达式

1.2.1花括号

格式：表达式

说明：

该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数

1.2.2差值闪烁

使用方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的，

加载完毕后才显示正确数据，我们称为插值闪烁

1.2.3v-text 和 v-html

可以使用 v-text 和 v-html 指令来替代

说明：

v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染

**“v-html”**不会对于HTML标签进行转义，而是直接在浏览器上显示data所设置的内容;而“ v-text”会对html标签进行转义

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-text="showStr"></span>
        <span v-html="showStr"></span>
    </div>
</body>
<script>
    let vm = new Vue(
        el: "#app",
        data: 
            showStr: "<h1>html片段</h1>"
        ,
    )
</script>
</html>

并且不会出现插值闪烁，当没有数据时，会显示空白或者默认数据。

2、指令

2.1、v-bind :单向绑定

html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；

而且在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

<!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>
     <!-- 给html标签的属性绑定 -->
     <div id="app"> 
        <!-- 完整语法 -->
        <a v-bind:href="link">gogogo</a>
        <!-- 缩写 -->
        <a :href="link">gogogo</a>
        <!-- 动态参数的缩写 -->
        <a :[key]="link">gogogo</a>

        <!-- class,style  class名：加上？-->
        <span v-bind:class="active:isActive,'text-danger':hasError"
          :style="color: color1,fontSize: size">你好</span>

    </div>

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

    <script>
        let vm = new Vue(
            el:"#app",
            data:
                link: "http://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:'red',
                size:'36px',
                key:'href'
            
        )
    </script>
</body>
</html>

上面所完成的任务就是给a标签绑定一个超链接。并且当“isActive”和“hasError”都是true的时候，将属性动态的绑定到，则绑定该“active”和 "text-danger"class。这样可以动态的调整属性的存在。

而且如果想要实现修改vm的"color1"和“size”， span元素的style也能够随之变化，则可以写作v-bind:style，也可以省略v-bind。

2.2、v-model双向绑定

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


    <!-- 表单项，自定义组件 -->
    <div id="app">

        精通的语言：
            <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/>
        选中了 language.join(",")
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue(
            el:"#app",
            data:
                language: []
            
        )
    </script>

</body>
</html>

上面完成的功能就是通过“v-model”为输入框绑定多个值，能够实现选中的值，在data的language也在不断的发生着变化。通过“v-model”实现了页面发生了变化，则数据也发生变化，数据发生变化，则页面也发生变化，这样就实现了双向绑定。

双向绑定：

效果：我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实

时观察到这个变化，我们将 num 输出到页面。

我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和

视图的关联即可（MVVM）

2.3、v-on为按钮绑定事件

参考1.1.3事件处理的demo，上面是为两个按钮绑定了单击事件，其中一个对于num进行自增，另外一个自减。

v-on:click也可以写作@click

2.3.1、事件修饰符

下面的这两个嵌套div中，如果点击了内层的div，则外层的div也会被触发；

<!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 事件修饰符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click="hello">
                小div <br />
                <!-- prevent 阻止事件的默认行为，例如这里阻止a标签跳转 -->
                <!-- <a href="http://www.baidu.com" @click.prevent="hello">去百度</a> -->
                <!-- stop 阻止事件冒泡，例如这里只会触发本身的点击事件弹出一个"lalala"然后跳转到baidu -->
                <!-- <a href="http://www.baidu.com" @click.stop="hello">去百度</a> -->
                <!-- 可以同时使用prevent和stop，同时阻止事件的默认行为和事件冒泡 -->
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>
        <!-- 非ctrl，alt，shift这三个组合键修饰符，keyup后面跟多个，按下其中一个即会触发 -->
        <input type="text" v-on:keyup.65.66="keyA">
        <input type="text" v-on:keyup.enter="keyA">
        <input type="text" v-on:keyup.enter.65="keyA">
        <!-- ctrl，alt，shift这三个组合键修饰符，keyup后面跟多个，要按下组合键才会触发 -->
        <input type="text" v-on:keyup.alt.65="keyA">
    </div>
   <script>
       let vm = new Vue(
           el: "#app",
           methods: 
               hello()
                   alert("lalala")
               ,
               keyA()
                    alert("按下了A")
               
           ,
       )
   </script>
</body>
</html>

关于事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来

表示的。

.stop ：阻止事件冒泡到父元素
.prevent：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

按键修饰符：

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift

2.4、v-for遍历循环

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

    <div id="app">
        <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" 
                -->
                对象信息：
                <span v-for="(v,k,i) in user">k==v==i；</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <以上是关于谷粒商城笔记三vue的主要内容，如果未能解决你的问题，请参考以下文章 
 谷粒商城学习日记（21）——Vue生命周期
 谷粒商城学习笔记-- 项目简介和分布式基础概念
 谷粒商城商品服务API
 谷粒商城商品服务API
 谷粒商城笔记
 谷粒商城学习日记（20）——Vue语法入门