Vue学习笔记（一）基础语法

最新推荐文章于 2024-07-04 10:12:44 发布

原创最新推荐文章于 2024-07-04 10:12:44 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java #html #js #css

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文档概述了Vue的基础知识，包括Vue简介、数据绑定、条件渲染、循环遍历、双向绑定和常见组件的使用，适合初学者快速上手。

前言

以前接触Vue不是很多，最近想拿来好好学习一下，本章作为学习笔记，记录学习过程！
这里记录一下此刻学习的视频：vue
本章记录vue的简介及基本语法。

一、vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。----vue官网

可以看出vue是一个只关注视图层的渐进式框架。用于构建用户界面。
本章是学习笔记，如果各位想更好的学习vue，建议直接去vue官网文档

下载、安装
学习任何一个第三方框架，都是先从下载安装开始的，vue也不例外。首先需要去官网下载vue的js文件。然后引入到自己的项目中，用script进行引入。当然了，它不止这一种方式，也可以使用cdn或者npm的方式。因为前期没用使用脚手架就暂时不使用npm的方式，后面说到的时候再细说这种方式。目前就使用下载引入的方式

二、vue语法

本节内容介绍vue的语法。太不会太过于详细，因为vue的开发者是尤雨溪，他是一名中国人，官网有着非常友好且详细的中文文档，包括语法和示例。

起步

html：

<div id="app">
  {{ message }} <!-- mustache语法，双括号语法 -->
</div>

js:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

输出：

Hello Vue!

插值操作（其他）

v-once: 一次性插值，数据发生改变时所在元素不会改变。
v-pre: 用于显示原本的内容，不进行vue编译。
v-html: 将变量值以html的方式展示。
v-text : 将变量值以text的方式展示。（不常用，感觉可以用{{}}代替）
v-clack: 斗篷，用于处理延迟加载的问题，给el挂载的元素加上该属性，并设置样式为display:none,当页面加载后vue会去除该属性。

属性绑定 bind

1、属性绑定

不只是元素中的内容会绑定data中的值，属性也是可能需要绑定的，比如img的src，或者a的href等可能是需要动态绑定的，Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

    <div id="app">
        <img :src="imgsrc">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                imgsrc: '../imgs/pkq.jpg'
            }
        });
    </script>

v-bind:src="“可以简写成:src=”"

2、绑定class（对象语法）

既然元素的属性可以动态绑定，那么class也是可以绑定的，它的绑定和其他的属性不太一样，此处记录对应语法。

        <span :class="{类名:value（boolean）}"></span>
        <span :class="{active:true}">你好</span>

{}表示类的对象，其中类名为给元素加的类名，value是表示该类名是否有效，是一个boolean值。
这里给span加了一个active类，并且有效，false表示无效。

可以加多个类名，如你好
也可以加不需要绑定的class,如：你好
此处的boolean值一般不是写死在元素里的，而是动态绑定的，可以绑定的。如下：

<div id="app">
        <span class="ishe" :class="{active:isActive,isrun:true}">你好</span>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                isActive: true
            }
        });
    </script>

3、绑定class（数组语法）

除了对象外还可以使用数组。不过这种方式相对使用的少点。

<span class="ishe" :class="[isActive,isRun]">你好</span>

data: {
    isActive: {
        active: true
    },
    isRun: {
        isrun: true
    }
}

4、绑定样式

样式的绑定和class很像，这里就直接上代码

<span :style="{color:acolor}">你好</span>

data: {
     acolor: 'red'
   }

需要注意以下几点：

color为属性名，可以不加引号，推荐使用驼峰命名法。
acolor为我定义的data中的属性名，也可以不加引号
red为属性值，和css里不一样，此处需要加引号，否者会没有效果

他分为对象语法和数组语法，和class相似，此处不再赘述。

5、值绑定

计算属性 computed

计算属性是vue中比较重要的部分，经常用于数据计算。

<span>{{add}}</span>

data: {
    fristname: '张',
    lastname: '三'
},
computed: {
    add() {
        return this.fristname + this.lastname
    }
}

这是最简单的一个示例，通常在add中会进行逻辑操作。
从名字我们就可以看出，计算属性是一个属性，但是看上面的代码，它又和方法类似，其实这是简写，计算属性有它的get/set方法。一般不使用set，我们调用的都是get方法。

计算属性和methods的比较

我们可以发现，计算属性不管是功能还是写法上都非常的相似，那么为什么需要多弄一个计算属性处理呢？
是因为computed是有缓存的，在不改变值得情况下，调用多次它只会执行一次，而methods却会调用一次执行一次。

事件监听 v-on

v-on用于进行事件监听，比如用户得点击、拖拽、键盘事件等。
它的简写为@，如v-on:click === @click

<button @click="search">查询</button>

 methods: {
     search() {
         console.log("正常查询...");
     }
 }

search方法可以进行复杂得逻辑计算，也可以进行通信。
方法调用时是没用参数得，如果需要传参，则需要写参数如 @click=“search(5)”
在没用实参得情况下，方法也是可以获取到一个参数的，它就是event对象。这是事件触发时生成的，可以看到事件的详细信息。

修饰符

通常情况下，我们使用v-on是进行一些事件处理的，vue提供的修饰符可以帮我们处理一部分情况，
.stop: @click.stop=“doThis” 停止冒泡
.prevent: @click.prevent=“doThis” 阻止默认行为
.once: @click.enter=“doThis” 只触发一次
.enter: @click.once=“doThis” 键别名
.13: @click.13=“doThis” 键代码
.stop.prevent：@click.stop.prevent=“doThis” 串联

条件判断 v-if

vue的if、elseif、else和js的很像。都是进行逻辑判断。

    <div id="app">
        <span v-if="score>=90">优</span>
        <span v-else-if="score>=60">良</span>
        <span v-else>差</span>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                score: 87
            }
        })
    </script>

但是很多时候我们不这么使用，它的逻辑判断我们是写在methods中的。

v-show

显示隐藏元素

    <span v-show="true">优</span>
    <span v-show="false">良</span>

v-if和v-show比较

v-if 和 v-show 都可以控制元素的显示隐藏，他们有什么区别呢？
v-if的隐藏是将元素删除，显示时新增元素。
v-show的隐藏时将元素的display设为none，显示时是去除display属性

循环遍历 v-for

通过v-for进行循环遍历，既可以遍历数组，也可以遍历对象。

遍历数组

    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>

const app = new Vue({
      el: "#app",
      data: {
          names: ['张三', '李四', '王五', '赵六']
      }
  });

带下标index：

     <ul>
         <li v-for="(item,index) in names">{{index+' '+item}}</li>
     </ul>

遍历对象

默认情况下，遍历的是对象的value值。

    <ul>
        <li v-for="item in mine">{{item}}</li>
    </ul>

    data:{
        mine: {
            name: 'zhang',
            age: '20',
            high: '1.88'
        }
    }

也可以遍历出key。

    <ul>
        <li v-for="(item,key) in mine">{{item+'-'+key}}</li>
    </ul>

同样可以遍历得到index下标。

     <ul>
         <li v-for="(item,key,index) in mine">{{item+'-'+key+"-"+index}}</li>
     </ul>

key值问题

我们可以给遍历的元素或组件绑定一个key，便于高效的更新虚拟dom，我们用key来做唯一标识。

    <ul>
         <li v-for="item in mine" :key="item">{{item}}</li>
    </ul>

双向绑定v-model

vue的一个特性就是MVVM双向绑定。当数据改变时，页面会响应式改变，而当表单中的时发生改变时，数据也能改变，这就是双向绑定。
v-model就是用来实现双向绑定的，不过它其实是一个语法糖。包含下面两个指令。

v-bind 绑定一个value属性
v-on 给当前属性绑定一个input事件
因此，下面两行代码表达的都是一个意思。

		<input type="text" v-model="message">
        <input type="text" :value="message" @input="message=$event.target.value">

结合radio使用

将radio的值与属性sex值绑定，实现双向绑定。
当v-model一致时，此处的name属性可以省去，同样有互斥效果。

    <div id="app">
        <input type="radio" name="sex" id="myradio1" value="male" v-model="sex">
        <label for="myradio1">男</label>

        <input type="radio" name="sex" id="myradio2" value="female" v-model="sex">
        <label for="myradio2">女</label>

        {{sex}}
    </div>

js:

sex: "female"

结合checkbox使用

一个checkbox单独使用时，值为boolean类型

     <input type="checkbox" id="agree" v-model="isyes"><label for="agree">同意</label>
     {{isyes}}

	isyes: false

多个checkbox使用时，值为数组【】

        <input type="checkbox" id="agree1" value="汽车" v-model="iswho"><label for="agree1">汽车</label>
        <input type="checkbox" id="agree2" value="飞机" v-model="iswho"><label for="agree2">飞机</label>
        <input type="checkbox" id="agree3" value="火车" v-model="iswho"><label for="agree3">火车</label>
        <input type="checkbox" id="agree4" value="轮船" v-model="iswho"><label for="agree4">轮船</label>

        {{iswho}}

iswho: []

结合select使用

select和checkbox 类似，也有选择单个和多个的情况。
选择单个时：

        <select v-model="iswho">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="凤梨">凤梨</option>
            <option value="柑橘">柑橘</option>
        </select>
        {{iswho}}

 	iswho: '香蕉'

选择多个时：

<select v-model="iswho" multiple></select>

iswho: []

修饰符的使用

前面我们已经学到了v-on有修饰符，在这里我们也将学习v-model的修饰符。
简单介绍三种：lazy、number、trim

哪些数组方法是响应式

我们都知道vue是响应式的。一旦值发生改变，页面也就会相应的改变。但是数组里并不是所有方法都是响应式的。
这里总结一下哪些是响应式的方法。

push()
pop()
shift()  从数组前面移除一个对象
unshift() 在数组最前面添加对象
splice() 可以实现删除、新增、替换
sort()
reverse()

需要注意，如果通过arr[0]="a"这种方式修改，页面是不会响应式改变的，可以使用splice或者Vue.set等替代。

阶段案例

该案例合理的运用了上面所学到的知识点，是非常不错的案例。

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

<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>图书购物车</title>
    <style>
        .one {
            margin: 0 auto;
        }

        .mytable {
            margin: 50px auto;
            width: 800px;
            border-collapse: collapse;
            text-align: center;
        }

        .mytable tr {
            height: 40px;
        }

        .mytable tr td {
            border: 1px solid #ccc;
        }

        .mytable thead tr {
            height: 50px;
            background-color: rgb(243, 239, 239);
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="one" v-if="books.length">
            <table class="mytable">
                <thead>
                    <tr>
                        <td></td>
                        <td>书籍名称</td>
                        <td>出版日期</td>
                        <td>书籍价格</td>
                        <td>购买数量</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.outdate}}</td>
                        <td>{{item.price|getAllPrice}}</td>
                        <td>
                            <button @click="sub(index)">-</button>
                            {{item.num}}
                            <button @click="inc(index)">+</button>
                        </td>
                        <td>
                            <button @click="rem(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>
                总价：{{counttotal|getAllPrice}}
            </div>
        </div>
        <div v-else>当前购物车没用书籍啦~</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                books: [{
                    name: '《Java》',
                    outdate: '2018-1',
                    price: 85,
                    num: 0
                }, {
                    name: '《CSS》',
                    outdate: '2019-9',
                    price: 59,
                    num: 0
                }, {
                    name: '《JS》',
                    outdate: '2018-10',
                    price: 39,
                    num: 0
                }, {
                    name: '《C++》',
                    outdate: '2021-3',
                    price: 128,
                    num: 0
                }],
                total: 0
            },
            methods: {
                sub(index) {
                    let num = this.books[index].num;
                    if (num <= 0) {
                        return;
                    }
                    this.books[index].num--;
                },
                inc(index) {
                    let num = this.books[index].num;
                    this.books[index].num++;
                },

                rem(index) {
                    this.books.splice(index, 1);
                }
            },
            computed: {
                counttotal() {
                    let books = this.books;
                    let allprice = 0;
                    for (index in books) {
                        const num = this.books[index].num;
                        const price = this.books[index].price;
                        allprice += num * price;
                    }
                    this.total = allprice;
                    return this.total
                }
            },
            filters: {
                getAllPrice(price) {
                    return "￥" + price.toFixed(2)
                }
            }
        });
    </script>
</body>

</html>