Vue JS

最新推荐文章于 2023-08-31 07:47:52 发布

没伞的孩子努力奔跑

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量163

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49591538/article/details/119152515

版权

一 VUE基本语法

（一）.入门步骤

1.导入vue.js文件 html下部编辑

2.指定区域进行渲染需要准备div vue.js代码

3.创建VUE.js对象指定渲染区域动态调用

（二）

插值表达式: {{key}}

特点: 如果页面没有渲染完成,则直接展现给用户插值表达式需要直接显示

（三）语法

1.const 定义常量的 *

2.let: 作用和var类似, 有作用域的概念 *

3.var 特点:没有作用域

4.el 指定区域

5.data: 定义属性

案例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>VUE入门案例</title>
   </head>
   <body>

       

       
       <div id="app">
           
           <h1>{{msg}}</h1>
       </div>


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

       
       <script>
           /**
           * 语法:
           *        1.const 定义常量的
           *        2.let: 作用和var类似, 有作用域的概念
           *        3.var 特点:没有作用域
           */
           const APP = new Vue({
               //1.指定区域
               el: "#app",
               //2.定义属性
               data: {
                   //key:value
                   msg: "您好VUE"
               }
           })
       </script>

   </body>
</html>

二数据显示

（一）常用的指令

1.v-text指令: 如果页面没有渲染完成,则不显示信息

注意事项: 只有显示时采用,输入操作不可使用

2..v-html 直接渲染html标签 -

3.v-pre 跳过预编译显示标签体本身

4.v-once 只渲染一次

案例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>数据显示</title>
   </head>
   <body>
       <div id="app">
           
           {{msg}}
           <h1 v-text="msg"></h1>

           
           <div v-html="h3Html"></div>

           
           <div v-pre>{{msg}}</div>

           
           <div v-once>{{once}}</div>


       </div>
   
       
       <script src="../js/vue.js"></script>

       
       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   msg: "您好VUE",
                   h3Html: "<h3>我需要html渲染</h3>",
                   once: "我只能被渲染一次"
               }
           })
       </script>
   </body>
</html>

三双向数据绑定

（一）

1.作用：双向数据绑定: 实现了页面与数据的绑定. 页面变数据变 / 数据变页面变.

2.语法 v-model

解释：1.数据端---页面 2.页面-----数据

（二）双向数据绑定原理

原理步骤:
1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟DOM对象,第一时间更新Model中的属性.
2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一事件通知真实的DOM对象.至此页面数据发生变化.

案例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>数据显示</title>
   </head>
   <body>
       <div id="app">
           
           <input name="msg" v-model="msg"/><br>
           {{msg}}

       </div>
       
       <script src="../js/vue.js"></script>

       
       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   msg: "数据随时修改"
               }
           })
       </script>
   </body>
</html>

四 MVVM设计思想

MVVM思想说明:
M: Model 封装的数据. 数据层
V: View 数据的展现视图层
VM: viewModel视图数据的控制层控制数据流转
MVVM设计思想是前端模拟后端为了解耦的一种设计思想.

五事件绑定

（一）语法

v-on:click="函数/直接进行计算"

@click="函数/直接进行计算"

（二）案例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>双向数据绑定</title>
   </head>
   <body>
       <div id="app">
           
           <input name="msg" v-model="msg"/><br>
           {{msg}}

       </div>
       
       <script src="../js/vue.js"></script>

       
       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   msg: "数据随时修改"
               }
           })
       </script>
   </body>
</html>

六按键触发机制

（一）语法

1.v-on:keydown="" 按下触发

2.v-on:keyup="" 弹起来触发

3.v-on:keypress="" 小键盘触发

（二）按键支持

（三）案例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>按键触发操作</title>
   </head>
   <body>
       <div id="app">
           
           <h3>用户数据:{{num}}</h3><br>
           
           <input type="text" v-on:keyup.space="addNum" v-model="num2" />
           <button @click="addNum">计算</button>


       </div>
       <script src="../js/vue.js"></script>

       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   num: 100,
                   num2: 0
               },
               methods: {
                   addNum(){
                       //this.num = this.num + this.num2
                       //将字符串转化为数值类型
                       this.num += parseInt(this.num2)
                   }
               }
           })
       </script>
   </body>
</html>

七按键修饰符

（一）阻止冒泡 .stop

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>按键修饰符</title>
   </head>
   <body>

       <div id="app">
           
           数值: {{num}}
           <div @click="num++">
               嵌套结构
               <button @click.stop="num++">计算</button>
           </div>
       <script src="../js/vue.js"></script>

       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   num: 0
               },
               methods: {

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

（二）阻止默认行为 .prevent

<a href="http://baidu.com" @click.prevent="aClick">百度</a>

八属性和类型绑定

1.属性语法: v-bind:href="VUE中的属性"

简化写法 :href="url"

2.类型语法规则: :class是属性的绑定,绑定之后查找对应的属性

3.属性切换语法: :class={class类型的名称: false}

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>属性绑定</title>
       <style>

           /* red 红色宽度50 高度50 */
           .red {
               background-color: red;
               width: 50px;
               height: 50px;
           }

           .blue {
               background-color: aqua;
               width: 100px;
               height: 100px;
           }

       </style>
   </head>
   <body>
       <div id="app">
           
           <a v-bind:href="url">百度</a>
           
           <a :href="url">百度</a>
           <hr />

           
           <div :class="colorClass">我是class修饰</div>
           <hr >

           
           <div :class="{red: flag}">我是class修饰</div>
           <button @click="flag = !flag">切换</button>

       </div>
       <script src="../js/vue.js"></script>
       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   url: "http://www.baidu.com",
                   colorClass: "blue",
                   flag: true
               }
           })
       </script>
   </body>
</html>

九分支结构语法

.语法:

1.v-if 如果为真则展现标签

2.v-else-if 必须与v-if连用

3.v-else 必须与v-if连用

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>属性绑定</title>
       <style>

       </style>
   </head>
   <body>
       <div id="app">
           
           <h3>评级</h3>
           请录入分数: <input v-model="score" />
           <div v-if="score >= 90 ">优秀</div>
           <div v-else-if="score >= 80 ">良好</div>
           <div v-else-if="score >= 70 ">中等</div>
           <div v-else-if="score >= 60 ">及格</div>
           <div v-else>不及格</div>

       </div>
       <script src="../js/vue.js"></script>
       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   score: 70
               }
           })
       </script>
   </body>
</html>

十循环结构

1.数组循环语法：v-for((value,index) in array)

2.对象循环语法 v-for((value,key,index) in obj)

3.对象和数组结合的语法：v-for(user in userList) 后续通过user.属性取值

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>循环结构</title>
       <style>

       </style>
   </head>
   <body>
       <div id="app">
           

           
           <p v-for="item in array" v-text="item">
               
           </p>

           
           <p v-for="(item,index) in array">
                   下标:{{index}}~~~数据值:{{item}}
           </p>
           <hr >
           
           <p v-for="(value,key,index) in user">
               {{index}}~~~~{{key}}~~~~{{value}}
           </p>

           
           <p v-for="user in userList">
               ID: {{user.id}}
               | name: {{user.name}}
               | age:{{user.age}}
               
           </p>

           

       </div>
       <script src="../js/vue.js"></script>
       <script>
           const APP = new Vue({
               el: "#app",
               data: {
                   array: ["郭晶晶","马龙","姚明"],
                   user: {
                       id: 100,
                       name: "tomcat",
                       age: 18
                   },
                   userList: [
                       {
                           id: 100,
                           name: "tomcat",
                           age: 18
                       },
                       {
                           id: 200,
                           name: "mysql",
                           age: 20
                       }
                   ]
               }
           })
       </script>
   </body>
</html>

十一 form表单数据绑定

form表单中如何实现双向数据绑定.

十二表单修饰符

语法: .number 只能输入数值类型

.trim 去除左右空格

.lazy 离焦事件才触发

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表单修饰符</title>
   </head>
   <body>
       <h1>表单修饰符number/trim/lazy</h1>
       <div id="app">
           
           <h3>数据展现: {{age}}</h3>
           年龄: <input type="text" v-model.number="age" />
           <button @click="addNum">增加</button>
           <hr />
           用户输入的长度: {{name.length}} <br>
           用户名: <input type="text" v-model.trim="name" />
           <hr />
           展现数据lazy~~{{msg}} <br>
           <input type="text" v-model.lazy="msg"/>
       </div>


       
       <script src="../js/vue.js"></script>
       <script>
           const app = new Vue({
               el:   "#app",
               data: {
                   age: 18,
                   name: '',
                   msg: ''
               },
               methods: {
                   addNum(){
                       this.age += 1
                   }
               }
           })
       </script>
   </body>
</html>

十三计算属性

将用户的输入内容进行反转
               API:
                   1.字符串转化为数组拆串 split('')
                   2.将数组倒序       .reverse()
                   3.将数组转化为字符串 .join('')

               计算属性功能用法:
                   1.插值表达式中应该写简单的算数计算,如果复杂应该封装
                   2.如果数据操作相同则应该简化过程.
               总结: 计算属性相对于方法效率高(从虚拟DOM中直接获取结果)

复杂的操作如果通过{{}} 插值表达式封装比较冗余.
如果将复杂的操作封装为方法调用一次执行一次效率低.
计算属性:
1.可以封装复杂操作
2.内部有缓存机制,只需要计算一次.多次调用效率高

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>计算属性</title>
   </head>
   <body>
       <h1></h1>
       <div id="app">
           
           <h3>数据展现:</h3>
           {{reverse()}}<br> 
           {{reverse()}}<br>
           {{reverse()}}<br>
           {{reverse()}}<br>
           {{reverseCom}}<br> 
           {{reverseCom}}<br>
           {{reverseCom}}<br>
           {{reverseCom}}<br>
           <input type="text" v-model="msg"/>
       </div>

       
       <script src="../js/vue.js"></script>
       <script>
           const app = new Vue({
               el:   "#app",
               data: {
                   msg: 'abc'
               },
               methods: {
                   reverse(){
                       console.log("方法执行!!!!!")
                       return this.msg.split('').reverse().join('')
                   }
               },
               computed: {
                   //key:value 必须添加返回值
                   reverseCom(){
                       console.log("计算属性!!!!")
                       return this.msg.split('').reverse().join('')
                   }
               }
           })
       </script>
   </body>
</html>

十四数组操作

--（一）数组的方法 java中的叫法push:入栈 pop弹栈
               push()    在结尾追加元素
               pop()   删除最后一个元素
               shift()   删除第一个元素
               unshift() 在开头追加元素
               splice() 替换数组中的数据 !!!!
               sort()   数据排序
               reverse() 数组反转

（二）splice()

参数: 3个参数 *

arg1: 操作数据的起始位置从0开始 *

arg2: 操作的数量阿拉伯数字 *

arg3: 替换后的数据.可以有多个(可变参数类型)

十五 VUE生命周期(难点!!)

周期:
1.初始化周期
1.beforeCreate vue对象实例化之前(刚开始)
2. created
3. beforeMount
4. Mounted 说明VUE对象实例化成功(DIV渲染完成)
2.修改周期
1. beforeUpdate 用户修改数据之前
2. updated 用户修改数据之后
3.销毁周期
1. beforeDestroy VUE对象销毁前
2. destroyed VUE对象销毁后(最后一步)

生命周期函数的作用:
如果需要对VUE对象中的数据进行额外的操作.则使用生命周期函数.
目的: 框架的扩展性更好.(实现定制化)

没伞的孩子努力奔跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue JS

一 VUE基本语法（一）.入门步骤1.导入vue.js文件 html下部编辑2.指定区域进行渲染需要准备div vue.js代码3.创建VUE.js对象指定渲染区域动态调用（二）插值表达式: {{key}}特点: 如果页面没有渲染完成,则直接展现给用户插值表达式需要直接显示（三）语法1.const 定义常量的 *2.let: 作用和var类似, 有作用域的概念 *3.var 特点:没有作用域4.el 指定区域5.data: 定义属性案例：&
复制链接

扫一扫