1、Vue基础指令

最新推荐文章于 2024-07-22 15:13:59 发布

不穿鞋的懒羊羊

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量417

点赞数 12

分类专栏：前后端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_73214301/article/details/138270516

版权

前后端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基本概念，包括其简洁、轻量级的特点，以及如何在HTML中安装和使用Vue。涵盖了数据绑定、渲染指令（如v-text和v-html）、条件指令（v-if）、循环指令（v-for）和属性绑定（v-bind和v-model）等关键知识点。

摘要由CSDN通过智能技术生成

1、Vue的介绍

Vue.js构建数据驱动的web应用框架

特点：简洁化、轻量级、数据驱动、模块友好

特征：一套用于构建用户界面的渐进式框架，Vue的核心只关注视图层

2、学习Vue之前拥有的基础

1、熟悉HTML/CSS/JS/Jquery

2、初步掌握JSON，闭包，AJAX

3、ES6，ES5(学校)

3、Vue的安装

复制链接浏览器打开，复制粘贴代码到vue.js文件中

4、引入vue.js文件

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

5、认识vue

<!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
 </head>
 
 <body>
   <div id="box">
     <!-- {{}}翻译变量的值 -->
     <h1>{{name}}</h1>
   </div>
   <script>
     new Vue({ //创建Vue的实例，注意V一定大写的，先引入Vue文件
       el: "#box", //绑定页面元素
       data: { //声明变量
         name: "张三"
       }
     })
   </script>
 </body>
 
 </html>

6、Vue的指令

1、渲染指令

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
 </head>
 
 <body>
   <div id="box">
     <!-- {{}}翻译变量的值 -->
     <h1>{{name}}</h1>
     <h1 v-text="name"></h1><!-- 第二个比第一个效率高 -->
     <h1 v-html="name"></h1><!-- 解释变量的同时，具有解析标签的效果 -->
   </div>
 
   <script>
     new Vue({ //创建Vue的实例，注意V一定大写的，先引入Vue文件
       el: "#box", //绑定页面元素
       data: { //声明变量
         name: "<i>张三</i>"
       }
     })
   </script>
 </body>
 
 </html>

2、条件指令

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
 </head>
 
 <body>
   <div id="box">
     <p v-if="isYang">阳了</p>
     <p v-else>健康</p>
   </div>
 
   <script>
     new Vue({ //创建Vue的实例，注意V一定大写的，先引入Vue文件
       el: "#box", //绑定页面元素
       data: { //声明变量
         isYang: false
       }
     })
   </script>
 </body>
 
 </html>

3、循环指令

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
 </head>
 
 <body>
   <div id="box">
     <p v-for="c in cities"><!-- 这里块元素里面只能嵌套行内元素，p标签里嵌套p标签是不行的 -->
       {{c.province}}
       <span v-for="city in c.citys">{{city.cityname}}</span>
     </p>
   </div>
 
   <script>
     new Vue({ //创建Vue的实例，注意V一定大写的，先引入Vue文件
       el: "#box", //绑定页面元素
       data: { //声明变量
         cities: [{
           province: "黑龙江省",
           citys: [{
             cityname: "哈尔滨市"
           }, {
             cityname: "大庆市"
           }]
         }, {
           province: "山东省",
           citys: [{
             cityname: "潍坊市"
           }, {
             cityname: "菏泽市"
           }]
         }]
       }
     })
   </script>
 </body>
 
 </html>

4、属性绑定指令

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
   <style>
     .r {
       color: red;
     }
 
     .g {
       color: green;
     }
   </style>
 </head>
 
 <body>
   <div id="box">
     <!-- v-bind是可以省略的，但是冒号：不可以省略 -->
     <input type="text" v-bind:value="inputValue">
     <h1 v-bind:class="colorClass">改变颜色</h1>
   </div>
 
   <script>
     new Vue({ //创建Vue的实例，注意V一定大写的，先引入Vue文件
       el: "#box", //绑定页面元素
       data: { //声明变量
         inputValue: "表单默认值",
         colorClass: 'g'
       }
     })
   </script>
 </body>
 
 </html>

5、数据双向绑定指令

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="./js/vue.js"></script>
 </head>
 
 <body>
   <div id="box">
     <!-- 修改值，变量的值也会改变 -->
     <span>{{sx}}</span><input type="text" v-model="sx">
   </div>
 
   <script>
     new Vue({ //创建Vue的实例，注意V一定大写的，先引入Vue文件
       el: "#box", //绑定页面元素
       data: { //声明变量
         sx: "双向绑定"
       }
     })
   </script>
 </body>
 
 </html>