Vue基础入门-01

野性酷女 2023-10-09 22:49 24阅读 0赞

#### Vue基础入门-01 ####

*  1 介绍
 *  2 入门案例
 *   *  2.1 el、data
     *  2.2 定义对象、数组复杂数据
     *  2.3 v-text、v-html
     *  2.4 v-on
     *   *  2.4.1 简单使用
         *  2.4.2 Vue实例中的this使用
         *  2.4.3 传递参数
         *  2.4.4 简化写法
     *  2.5 v-if、v-show
     *  2.6 v-bind
     *  2.7 v-for
     *  2.8 v-model
 *  3 备忘录案例

## 1 介绍 ##

vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。

[vue官网传送门][vue]

[文章配套源码传送门][Link 1]

什么是MVVM？

MVVM是一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>MVVM</td> 
   <td>M-V-VM</td> 
  </tr> 
  <tr> 
   <td>M</td> 
   <td>Model数据模型，json格式的数据</td> 
  </tr> 
  <tr> 
   <td>V</td> 
   <td>view视图，JSP，HTML</td> 
  </tr> 
  <tr> 
   <td>VM</td> 
   <td>ViewModel视图模型，把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来， 还负责把View的修改同步回Model</td> 
  </tr> 
 </tbody> 
</table>

## 2 入门案例 ##

### 2.1 el、data ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <div>{
       {msg}}</div> // cycyong
        <div>{
       {msg.toUpperCase()}}</div> // 变大写:CYCYONG
        <div>{
       {msg == 'cycyong'}}</div>  // true
        <div>{
       {msg.length}}</div> // 7
        <div>{
       {count}}</div> // 0
        <div>{
       {count+1}}</div> // 1
        <div>{
       {count++}}</div> // 1
    </div>
    
    <script src="statics/vue.js"></script>
    <script>
        new Vue({
          
            el:'#app',// el:element 元素作用范围，代表vue实例的作用范围
            data:{
          
                msg:"cycyong",
                count:0
            }// 自定义数据
        })// 创建一个vue实例
    </script>
    </body>
    </html>

总结：

1.  一个页面中只能存在一个vue实例不能创建多个vue实例
2.  vue实例中`el`代表vue实例的作用范围，日后在vue实例作用范围内可以使用\{ \{data属性中变量名\}\}直接获取data中变量名对应属性值
3.  vue实例中`data`用来给当前vue实例绑定自定义数据,日后绑定数据可以在vue实例作用范围内直接使用\{ \{变量名\}\}方式获取
4.  进行数据获取时,可以在\{ \{\}\}取值语法中进行算数运算逻辑运算以及调用相关类型的相关方法
5.  vue实例中`el`可以书写任何css选择器，但是推荐使用id选择器因为一个vue实例只能作用于一个具体作用范围

### 2.2 定义对象、数组复杂数据 ###

Demo02.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="app">
        <div>{
       { msg }}</div> //hello vue
        <div>{
       { user }}</div> // { "id": 20, "username": "qwe", "age": 23, "address": "广州" }
        <div>{
       { user.address }}</div> // 广州
        <div>{
       { users[0].age }}</div> // 21
        <div>{
       { address[2] }}</div> // 深圳
    
    </div>
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el: "#app",
            data:{
          
                msg:'hello vue',
                count:0,
                user:{
          id:20,username:"qwe",age:23,address:"广州"},
                users:[
                    {
          id:21,username:"cyc",age:21,address:"北京"},
                    {
          id:22,username:"zxc",age:22,address:"南京"},
                    {
          id:23,username:"asd",age:11,address:"上海"}
                ],
                address:['北京','上海','深圳','广州']
            }
        });
    </script>
    </body>
    </html>

输出结果：

hello vue
    {
         "id": 20, "username": "qwe", "age": 23, "address": "广州" }
    广州
    21
    深圳

### 2.3 v-text、v-html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h1>{
       { msg }}</h1>
        <h1 v-text="msg"></h1>
        <span v-text="content"></span><br>
        <span v-html="content"></span>
    </div>
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el:'#app',
            data:{
          
                msg:"hello vue",
                content:'<a href="http://www.baidu.com">点我打开百度</a>'
            }
        })
    </script>
    </body>
    </html>

输出结果：

hello vue
    hello vue
    <a href="http://www.baidu.com">点我打开百度</a>（文本）
    点我打开百度（链接）

![在这里插入图片描述][96a350e71b1d41bc9249624f9764b09b.png]  
总结：

*  `v-text`、`v-html`作用：用来获取vue实例中data定义的属性变量
 *  `{ {}}`取值和`v-text`取值区别
    
     *  `{ {}}`取值不会将标签原始数据清空﹑使用`v-text`取值清空标签原始数据,`{ {}}`这种方式取值插值表达式
     *  `{ {}}`取值存在插值闪烁`v-text` `v-html`取值不存在插值闪烁
 *  `v-text`和`v-html`的区别
    
     *  使用`v-text`取值:直接将获取数据渲染到指定标签中，类似于innerText
     *  使用`v-html`取值:先将获取数据进行html标签解析，解析之后再渲染到指定标签，类似于innerHTML

### 2.4 v-on ###

#### 2.4.1 简单使用 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <button v-on:click="test">点击</button>
    </div>
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el:'#app',
            methods:{
          
                test:function () {
          
                    alert("点击")
                }
            }
        })
    </script>
    </body>
    </html>

输出结果：  
点击按钮，弹出提示框！

![在这里插入图片描述][359ef404c4a24b30a442c0180ba1cb1b.png]  
总结：

js事件(event)的事件三要素：

*  事件源：发生特定动作的html标签
 *  事件：发生特定动作的事件，`onclick`、`onmouseover`、`onblur`…
 *  监听器：时间处理程序，一般在js中是事件处理函数 `function()`

`v-on` ：给页面中的标签绑定事件用的 语法：在对应的标签上使用v-on：事件名=“事件处理函数”

#### 2.4.2 Vue实例中的this使用 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h1>{
       {count}}</h1>
        <button v-on:click="test">点击</button>
    </div>
    
    
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el:'#app',
            data:{
          
                count:0
            },
            methods:{
          
                test:function () {
          
                    console.log(this);
                    this.count++;
                    this.test2();
                },
                test2:function () {
          
                    console.log("aaa");
                }
            }
        })
    </script>
    </body>
    </html>

查看`this`输出Vue的实例

**发现data属性中的变量和methods中函数都暴露在Vue实例中**

![在这里插入图片描述][ed4804b2fe4a4112abbc5be473d102c6.png]  
输出结果：

每点击一下`count`就+1  
![在这里插入图片描述][39e8aa44b92e4368a7fd7e6355c7b1ae.png]  
总结：

*  在vue定义的事件中`this`指的就是当前的Vue实例,在事件中通过使用this获取Vue实例中相关数据

#### 2.4.3 传递参数 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <div>{
       {msg}}</div>
        <div><span>年龄</span><span>{
       {age}}</span></div>
        <button v-on:click="test1">+1</button>
        <button v-on:click="test2">+10</button>
        <button v-on:click="test3(30,'您好')">+age,并打印msg</button>
        <button v-on:click="test4({age:20,msg:'您好呀'})">+age,并打印msg</button>
    </div>
    
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el:'#app',
            data:{
          
                msg:"hello vue",
                age:0
            },
            methods:{
          
                test1:function () {
          
                    this.age++
                },
                test2:function () {
          
                    this.age +=10
                },
                test3:function (age,msg) {
          
                    this.age +=age
                    this.msg = "Hello vue" + msg
                },
                test4:function (parms) {
          
                    this.age +=parms.age
                    this.msg = parms.msg
                }
            }
        })
    </script>
    </body>
    </html>

总结：

*  传递参数既可以是变量也可以是对象，对象的属性直接点出来就行

#### 2.4.4 简化写法 ####

将2.4.3的案例进行简化如下，实现功能完全一致：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <div>{
       {msg}}</div>
        <div><span>年龄</span><span>{
       {age}}</span></div>
        <button @click="test1">+1</button>
        <button @click="test2">+10</button>
        <button @click="test3(30,'您好')">+age,并打印msg</button>
        <button @click="test4({age:20,msg:'您好呀'})">+age,并打印msg</button>
    </div>
    
    
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el:'#app',
            data:{
          
                msg:"hello vue",
                age:0
            },
            methods:{
          
                test1() {
          
                    this.age++
                },
                test2() {
          
                    this.age +=10
                },
                test3(age,msg){
          
                    this.age +=age
                    this.msg = "Hello vue" + msg
                },
                test4(parms){
          
                    this.age +=parms.age
                    this.msg = parms.msg
                }
            }
        })
    </script>
    </body>
    </html>

总结：

*  定义事件的两种写法
    
     *  `函数名:function(){}`
     *  `函数名(){}`
 *  绑定事件时可以通过`@`符号形式简化`v-on`的事件绑定

### 2.5 v-if、v-show ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        
        <div name="show" v-show="isShow">{
       {msg}}</div>
        
        <div name="if" v-if="isShow">{
       {msg}}</div>
    </div>
    
    <script src="statics/vue.js"></script>
    <script>
        const app = new Vue({
          
            el:'#app',
            data:{
          
                msg:"hello vue",
                isShow: false
            },
            methods:{
          
            }
        })
    </script>
    </body>
    </html>

我们来看看`v-show`和`v-if`是如何改变标签的：

![在这里插入图片描述][b504f60870bc440e9f1102d15f0f022f.png]  
可以看到`v-show`是通过改变css样式的display属性进行修改的，而`v-if`则直接操作dom删除该标签。

总结：

*  `v-if`底层通过控制dom树上元素节点实现页面标签展示和隐藏（dom树）
 *  `v-show`底层通过控制标签css中display属性实现标签展示和隐藏（css样式）
 *  需要频繁切换，使用`v-show`，很少改变则使用`v-if`

### 2.6 v-bind ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <img :src="src" :width="width" @mouseover="change1" @mouseout="change2">
    </div>
    <script src="statics/vue.js"></script>
    <script>
      new Vue({
          
        el:"#app",
        data:{
          
            src:"https://img0.baidu.com/it/u=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500",
            width: 300
        },
        methods:{
          
            //鼠标经过----沙漠
            change1(){
          
                this.src = "https://img1.baidu.com/it/u=3648946557,216093598&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                this.width = 500
            },
            //鼠标移开----湖泊
            change2(){
          
                this.src = "https://img0.baidu.com/it/u=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500"
                this.width = 300
            }
        }
      })
    </script>
    </body>
    </html>

输出结果：

鼠标放在图片和离开图片发生变化！！  
![在这里插入图片描述][da74439d4e1843a3b6e06de9aca189e3.gif]

`v-bind`总结：

*  作用：用来绑定html标签中某个属性交给vue实例进行管理
 *  好处：一旦属性交给vue实例进行管理之后，可以通过修改vue实例中绑定属性达到动态修改标签属性的效果
 *  语法:对应标签上`v-bind: 属性名="属性值"`,简化写法`:属性名="属性值"`

### 2.7 v-for ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        
        <span v-for="(value,key,index) in user">
            ({
       {index}}=={
       {key}}=={
       {value}})
        </span>
        
        <span>
            <li v-for="(addr,index) in address">({
       {index}}---{
       {addr}})</li>
        </span>
        
        <table border="1" width="30%">
            <tr>
                <th>index</th>
                <th>id</th>
                <th>name</th>
                <th>address</th>
                <th>do</th>
            </tr>
            <tr v-for="(user,index) in users" :key="user.id">
                <td>{
       {index}}</td>
                <td>{
       {user.id}}</td>
                <td>{
       {user.name}}</td>
                <td>{
       {user.address}}</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="statics/vue.js"></script>
    <script>
      new Vue({
          
        el:"#app",
        data:{
          
            user:{
          id:101,name:"cycyong",address:"北京"},
            address: ['北京','上海','深圳','天津'],
            users:[
                {
          
                    id:101,
                    name:'cyc',
                    address:'北京'
                },
                {
          
                    id:102,
                    name:'asd',
                    address:'上海'
                },
                {
          
                    id:103,
                    name:'zxc',
                    address:'深圳'
                },
                {
          
                    id:104,
                    name:'bnm',
                    address:'天津'
                }
            ]
        },
        methods:{
          
        }
      })
    </script>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][71cbdfe6e4eb4fda86c074a6365e5a21.png]  
总结：

*  作用:用来在页面中实现vue中定义数据的遍历
 *  语法:直接在对应标签上加入v-for指令
 *  遍历对象：`v-for="(value,key,index) in data中变量名"`
 *  遍历数组：`v-for="(item,index) in data中的变量名"`,item代表普通元素
 *  遍历数组对象：`v-for="(item,index) in data中的变量名" :key="唯一标识字段"`,item代表对象
 *  注意:在使用`v-for`建议尽可能提供 key-attribute,key属性唯一

### 2.8 v-model ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
    <form>
        用户名:<input type="text" v-model="user.username"><br>
        密码:<input type="password" v-model="user.password"><br>
        邮箱:<input type="email" v-model="user.email"><br>
        qq:<input type="text" v-model="user.qq"><br>
        验证码:<input type="text" v-model="user.code">
    </form>
        <button @click="submit" >提交</button>
    </div>
    
    <script src="statics/vue.js"></script>
    <script>
      const app = new Vue({
          
        el:"#app",
        data:{
          
            msg:"hello vue",
            user:{
          },
        },
        methods:{
          
            submit() {
          
                console.log(this.user)
            }
        }
      })
    </script>
    </body>
    </html>

代码解析：

*  `v-model`实现`value`的双向绑定，以后我们在使用`ajax`的时候，不用再一个一个去取值，直接在data中声明一个对象接收即可。
 *  该例子中，在data声明了一个空对象`user`，在form表单中，`v-model`绑定了`user`里面的属性，虽然`user`对象中没有这些属性，但是vue是允许这样声明对象属性的。

运行结果：

![在这里插入图片描述][213702b4cd7f48428fb5daeb11593dbc.png]  
`v-model` 和 `v-bind`的区别

*  `v-bind`是单向绑定，用来绑定数据和属性以及表达式，数据只能**从data流向页面**。
 *  `v-model`是双向绑定，**数据能从data流向页面，也能从页面流向data**。
 *  `v-bind`可以给任何属性赋值，`v-model`只能给表单类，也就是具有`value`属性的元素进行数据双向绑定，如text、radio、checkbox、selected。

什么是双向绑定? 下面给出一个例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <input type="text" v-model="msg_1" v-on:input="show_1">
        <input type="text" v-bind:value="msg_2" v-on:input="show_2">
    </div>
    <script src="statics/vue.js"></script>
    <script>
      const app = new Vue({
          
        el:"#app",
        data:{
          
            msg_1:"hello vue1",
            msg_2:"hello vue2",
    
        },
        methods:{
          
            show_1(){
          
                console.log("v-model的内容:"+this.msg_1)
            },
            show_2(){
          
                console.log("v-bind的内容:"+this.msg_2)
            }
        }
      })
    </script>
    </body>
    </html>

运行结果：

我们看到使用`v-bind`进行文字填写，data中的msg\_2始终不发生变化，而使用`v-model`进行文字填写，data中的msg\_1随着我们填写的内容发生变化。  
对于msg\_1我们成为单向绑定，msg\_2我们成为双向绑定。

![在这里插入图片描述][8fb38cce8624419fa1ca3257d71813c1.gif]

![在这里插入图片描述][61387352a08e46dab0ea1d93030dfd79.png]

## 3 备忘录案例 ##

功能要求：

1.  实现备忘录的添加、删除
2.  添加完成之后，清空输入框
3.  统计备忘录中数目条数
4.  能够一键删除备忘录中的内容

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            请输入内容: <input type="text" v-model="msg"> <button @click="addMsg">添加到备忘录中</button><br>
            <ul>
                <li v-for="(item,index) in list">{
       {index+1+'.'}}{
       {item}}<a href="javascript:;" @click="delMsg(index)">删除</a></li>
            </ul>
            <a v-show="list.length!==0" href="javascript:;" @click="clear">清空备忘录</a>
            <h3 v-if="list.length!==0">当前备忘录:一共{
       {list.length}}条记录</h3>
            <h3 v-else style="color: pink">没有数据！</h3>
        </div>
    <script src="statics/vue.js"></script>
    <script>
        new Vue({
          
            el:"#app",
            data:{
          
                msg:"",
                list:['今天记得看电视！','今天记得要学习！','今天记得打游戏！'],
            },
            methods:{
          
                // 空串"" 和 null 和 0 和 undefined 判断都是为false
                addMsg(){
          
                    if(!this.msg){
          
                        alert("请输入内容！！！")
                        return false
                    }
                    this.list.push(this.msg)
                    this.msg = ""
                },
                delMsg(index){
          
                    this.list.splice(index,1)
                },
                clear(){
          
                    this.list = []
                }
            }
        })
    </script>
    </body>
    </html>

代码解析：

*  在a标签中添加`javascript:;` 就是去掉a标签的默认行为，跟`href=”javascript:void(0)”`是一样的，void 是JavaScript 的一个运算符，void(0)就是什么都不做的意思
 *  `空串""` 、 `null` 、 `0` 、 `undefined` 判断都是为false
 *  JS中清空数组有三种方法：
    
     *  splice(0,array.length),第一个参数为其实index，第二个参数为要删除的数量
     *  length赋值为0
     *  赋值为\[ \]

运行结果：  
![在这里插入图片描述][30c30256354d4c4bacba2b5450670837.gif]

[vue]: https://cn.vuejs.org/
[Link 1]: https://download.csdn.net/download/cycyong/87771836
[96a350e71b1d41bc9249624f9764b09b.png]: https://img-blog.csdnimg.cn/96a350e71b1d41bc9249624f9764b09b.png
[359ef404c4a24b30a442c0180ba1cb1b.png]: https://img-blog.csdnimg.cn/359ef404c4a24b30a442c0180ba1cb1b.png
[ed4804b2fe4a4112abbc5be473d102c6.png]: https://img-blog.csdnimg.cn/ed4804b2fe4a4112abbc5be473d102c6.png
[39e8aa44b92e4368a7fd7e6355c7b1ae.png]: https://img-blog.csdnimg.cn/39e8aa44b92e4368a7fd7e6355c7b1ae.png
[b504f60870bc440e9f1102d15f0f022f.png]: https://img-blog.csdnimg.cn/b504f60870bc440e9f1102d15f0f022f.png
[da74439d4e1843a3b6e06de9aca189e3.gif]: https://img-blog.csdnimg.cn/da74439d4e1843a3b6e06de9aca189e3.gif
[71cbdfe6e4eb4fda86c074a6365e5a21.png]: https://img-blog.csdnimg.cn/71cbdfe6e4eb4fda86c074a6365e5a21.png
[213702b4cd7f48428fb5daeb11593dbc.png]: https://img-blog.csdnimg.cn/213702b4cd7f48428fb5daeb11593dbc.png
[8fb38cce8624419fa1ca3257d71813c1.gif]: https://img-blog.csdnimg.cn/8fb38cce8624419fa1ca3257d71813c1.gif
[61387352a08e46dab0ea1d93030dfd79.png]: https://img-blog.csdnimg.cn/61387352a08e46dab0ea1d93030dfd79.png
[30c30256354d4c4bacba2b5450670837.gif]: https://img-blog.csdnimg.cn/30c30256354d4c4bacba2b5450670837.gif