Vue 2的入门

白泽的笔记

已于 2022-09-27 09:46:14 修改

阅读量2.5k

点赞数 4

文章标签： vue.js 学习前端 html javascript

于 2022-09-19 17:26:53 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/126936875

版权

Vue的概述

渐进式JavaScript框架

前端三大框架（React，Vue，Angular）

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

简单，高效，生态丰富（插件多）

Vue的安装与使用

安装

1.直接引用

CDN

下载地址

https://v2.cn.vuejs.org/v2/guide/installation.html

2.安装脚手架

npm install -g @vue/cli

使用

new Vue 函数创建一个新的应用实例

new Vue({

el:"#box",//指定vue的模板css选择器

data:{msg:"你好"}// 指定data数据

})

模板指定

完整代码

<!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="box">
        <h1>{{msg}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>//vue的cdn
    <script>
        new Vue({
            el: "#box",//指定vue的模板css选择器
            data: {
                msg: '你好'//指定data数据
            },
        })
    </script>
</body>

</html>

Vue模板语法-文本渲染

模板语法介绍

指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

文本渲染-{{}}

{{ }} 语法

new Vue({

el:"#box",//指定vue的模板css选择器

data:{msg:"你好"}// 指定data数据

})

{{ }} 中的表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ 1+1 }}//2

{{2+3>8?'大于':'小于'}}//小于

{{ msg.split('').reverse().join('') }}//好你

// 01渲染Vue的数据
// 02数学运算
// 03执行js的普通方法split分割, reverse反转数组
// join连接数组
// 04三元运算(不能使用if, for等多行命令)

v-text指令

指令是带有 v- 前缀的特殊属性。

<h1 v-text="msg">{{msg}}</h1>//你好

new Vue({

el:"#box",//指定vue的模板css选择器

data:{msg:"你好"}// 指定data数据

})

v-html指令

输出真正的html

<h1 v-html="'<strong>中国</strong>,'+msg">{{msg}}</h1>//中国，你好

new Vue({

el:"#box",//指定vue的模板css选择器

data:{msg:"你好"}// 指定data数据

})

Vue模板语法-属性渲染

指令参数

指令是带有 v- 前缀的特殊 attribute。指令属性值预期是单个 JavaScript 表达式

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

属性渲染

v-bind指令给html标签动态的绑定属性

<h1 v-bind:title="str">这是一个title</h1>

属性渲染简写

v-bind可以简写为：

<h1 :title="str">这是一个title</h1>

条件渲染

v-if v-else-if v-else

        <p v-if="score>90">就把潘金莲送给你了</p>
       <p v-else-if="score>80">武大郎</p>
       <p v-else-if="score>70">武松</p>
       <p v-else>逐出师门</p>
       <input type="text" v-model="score"/>

new Vue({
            el: "#box",//指定vue的模板css选择器
            data: {
                score:91,//指定data数据
            },
        })

// v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

v-show

        new Vue({
                       el:'#box',
                       data:{
                           flag:false,
                          }
                  })

列表渲染

v-for

<p v-for="item in 10">{{item}}</p>
       
       <p v-for="item in obj">{{item}}</p>
       <p v-for="(item,index) in obj">{{index}}:{{item}}</p>//item当前向 index索引
       
       <p v-for="item in str" :key="item">{{item}}</p>

new Vue({
           el: '#box',
           data: {
               str: '学好前端',
               obj: {
                   tel: 18239607956,
                   qq: 2523925028,
                   wx: 123456789,
                   name: 'baize'
               }
           }
       })

事件

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<h1>{{counter}}</h1>

<button @click="counter++">{{counter}}</button>

<button v-on:click="counter--">{{counter}}</button>

new Vue({

data() {

return { counter: 1 }

}

})

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

        new Vue({
               el: '#box',
               data(){
                   return{
                       num:1
                   }
               },
               methods:{
                   // sayNum:function(){
                       sayNum(n){// 简写:
                       this.num+=n;// (n)形式参数（形参）
                       alert(this.num);
                   }
               }
           })

            //this指向new Vue创建的实例
           // vue data 采用函数返回形式
           //vue 实例直接数据隔离相互不影响

事件的特殊参数（$event ）

<div id="box">
           
           
           <h1 @click="sayNum($event,1)">事件特殊参数</h1>
           <button type="button" @click="sayNum($event,3)">{{num}}</button>
       </div>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           new Vue({
               el: '#box',
               data(){
                   return{
                       num:1
                   }
               },
               methods:{
                   // sayNum:function(){
                       sayNum(e,n){// 简写:
                       // e代表事件对象
                       // e.target被点击的元素，innerText文本内容
                       alert(e.target.innerText);
                       this.num+=n
                   }
               }
           })

       </script>

事件修饰符

概括

.stop 阻止事件冒泡

.prevent 阻止默认事件

.capture 捕获

.self 自身元素触发

.once 执行一次

.passive 滚动立即触发，不等待滚动完成（移动端性能提升）

实例：

<div id="box">
           <h1>表白</h1>
           
           <div class="parent" @click="doHd">
               
               <button @click.once="say">表白</button>
               
               <a href="http://baidu.com" @click.prevent.stop="doit">百度</a></div>
       </div>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           new Vue({
               el: '#box',

               methods: {
                   // say:function(){
                   say() { // 简写:
                       alert("表白");
                   },
                   doit() {
                       alert("百度！")
                   },
                   doHd(){
                       alert('999')
                   }
               }
           })
           // .capture   捕获
           // .self       自身元素触发
           // .passive   滚动立即触发，不等待滚动完成（移动端性能提升）

按键修饰符

监听键盘事件时，我们经常需要检查特定的按键。可以使用按键修饰符

概述

Vue 为最常用的键提供了别名

.enter 回车

.tab 制表

.delete “删除”和“退格”键

.esc 取消

.space空格

.up 上

.down 下

.left 左

.right 右

系统修饰键

按下相应按键时才触发鼠标或键盘事件的监听器。

概述

.enter 回车

.ctrl

.alt

.shift

.meta (⌘或Windows 徽标键 ⊞)

.exact 精确

鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

概述

.left

.right

.middle

表单绑定

文本与多行文本

       </div>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           new Vue({
               el: '#box',
               data(){
                   return{
                       msg:"",
                       text:"",
                       str:"one two three"
                   }
               }

           })

       </script>

复选框checkbox 单选框radio 选择框 select

//checkbox
           <h1>单个checkbox</h1>
           <input type="checkbox" v-model="select">{{select}}
           <h1>多个checkbox</h1>
           <p>{{fav}}</p>
           <input type="checkbox" value="唱歌" name="fav" v-model="fav" />唱歌<br>
           <input type="checkbox" value="跳舞" name="fav" v-model="fav" />跳舞<br>
           <input type="checkbox" value="看书" name="fav" v-model="fav" />看书<br>
           <input type="checkbox" value="游泳" name="fav" v-model="fav" />游泳<br>

//radio
           <h1>radio-{{sex}}</h1>性别:
           <input type="radio" name="sex" v-model="sex" value="1">男
           <input type="radio" name="sex" v-model="sex" value="2">女
           <input type="radio" name="sex" v-model="sex" value="3">保密<br>

//select
           <h1>select -{{sel}}</h1>
           <p>小张的文凭</p>
           <select name="" id="" v-model="sel">
               <option value="胎教">胎教</option>
               <option value="学前班">学前班</option>
               <option value="小学">小学</option>
               <option value="初中">初中</option>
           </select>

       </div>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           new Vue({
               el: '#box',
               data() {
                   return {
                       fav: [],
                       select: true,
                       sex: 1,
                       sel: '小学'
                   }
               }

})
</script>

表单修饰符

.lazy

你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

new Vue({
               el: '#box',
               data() {
                   return {
                       num: 1,
                       str: '国庆快乐'
                   }
               }

})

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

        new Vue({
               el: '#box',
               data() {
                   return {
                       num: 1,
                       str: '国庆快乐'
                   }
               }

})

.trim
过滤首尾空白

        new Vue({
               el: '#box',
               data() {
                   return {
                       num: 1,
                        msg: '   国庆快乐   '
                   }
               }

})

计算 computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

（从现有数据计算出新的数据）

实例

</div>

new Vue({
               el: '#box',
               computed: {
                   //从现有的n1与n2计算出n3
                   "n3": function() {
                       return this.n1 + this.n2;
                   },
                   //从现有的str计算出rstr
                   rstr() {
                       return this.str.split("").reverse().join('');
                   }
               },
               data() {
                   return {
                       n1: 1,
                       n2: 2,
                       str: "明天开始放假"
                   }
               }
           })

watch监听

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

<div id="box">
           <h1>watch监听</h1>
           <button @click="num++">{{num}}</button>
       </div>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           new Vue({
               el: '#box',
               data() {
                   return {
                       num: 5
                   }
               },
               watch: {
                   "num": {
                       handler(nval, oval) {
                           // ovaL和nval都是最新的值
                           console.log('数据num', oval, "变", nval)
                       }
                   }
               }
           })
       </script>

2.引用数据类型需要添加处理器handler与deep

    <div id="box">
           <h1>watch监听</h1>
           <input type="text" v-model="obj.pre">
           <select name="" id="" v-model="obj.type">
               <option value="+">+</option>
               <option value="-">-</option>
               <option value="*">*</option>
               <option value="/">/</option>
           </select>
           <input type="text" name="" id="" v-model="obj.next">
           =
           {{obj.result}}
       </div>
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           new Vue({
               el: '#box',
               data() {
                   return {
                       obj: {
                           pre: 1,
                           next: 1,
                           type: "+",
                           result: 2
                       }
                   }
               },
               watch: {
                   "obj": {
                       //引用类型数据监听需要添加deep选项
                       // oval和nval都是最新的值
                       handler(nval, oval) {
                           // console.Log("数据发生变化" , nvaL , ovaL);
                           //只要obj发生变化重新计算result的值
                           this.obj.result = eval(`(${this.obj.pre})${this.obj.type}(${this.obj.next})`);
                       },
                       deep: true,
                   }
               }
           })
       </script>

Class 与Style

class的绑定

操作元素的 class 列表和内联样式因为它们都是 attribute
Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

           .big {
               font-size: 24px;
               padding: 8px;
           }

           .bold {
               font-weight: 900;
           }
       </style>

<div id="app">
           
           <button @click="flag=!flag" v-bind:class="flag?'active':''">开关</button>
           
           <button @click="flag=!flag" :class="{'active':flag,'big':isBig}">开关</button>
           
           <p :class="classList">这是行测试文本</p>
           
       </div>

<script>
           new Vue({
               el: "#app",

               data() {
                   return {
                       flag: true,
                       isBig: false,
                       classList: ['bold', 'big', 'active']
                   }
               },

})
</script>

style的绑定

对象语法:

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

数组语法

<p :style="{'fontSize':'48px','backgroundColor':color,'lineHeight':height+'px'}">样式的绑定</p>
       </div>
       <script>
           new Vue({
               el: "#app",

               data() {
                   return {
                       color: "#ff7700",
                       height: 80
                   }
               },

})
</script>