Community Learn Tools Library Leisure
search
English
Home > List of blog posts > vue基本语法与常用指令
Blogger Information
Blog 16
fans 0
comment 0
visits 6168
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue基本语法与常用指令
glen
Original
375 people have browsed it

vue基本语法与常用指令

前端的三驾马车
  1. 1.react.js
  2. 2.agular.js
  3. 3.vue.js

前端的三板斧

  1.  html
  2.  css
  3.  JavaScript

vue

vue.js ：vue官网:
https://cn.vuejs.org/guide/introduction.html

引入vue
1.直接通过script 标签引入

  1. <script src="https://unpkg.com/vue@next"></script>

2.静态页面：

  1. <h1>Hello World</h1>

3.模板页面化：通过模板字面量将页面模板化，页面内容可以根据不同的内容进行更改，用两个大括号包围起来将（双大括号）；

  1. <!---- {{message}} : 插值, 数据占位符 ---->
  2.  <h1 class="title">{{message}}</h1>

4.用es6写：将es6 里面的textContent进行文本替换，将双大括号的内容更新成我们需要输出的内容

  1. document.querySelector('.title').textContent = 'Hello 猪老师早上好';

5.vue.js：通过Vue.createApp创建一个vue实例，然后调用data方法,对上方的定义的插值message进行传值
可以通过定义一个容器的来装之后，通过mount方法将内容挂载到对应的页面元素上输出

  1. const app = Vue.createApp({
  2.         data() {
  3.           return {
  4.             message: 'Hello 大家好不好',
  5.           };
  6.         },
  7.       });
  8.  app.mount(document.querySelector('.title'));
常用术语

1.挂载点;挂载点: vue实例的作用域（当前vue可以影响的区域）
不能挂载到body里面，可以选择body里面的元素进行挂载：

  1. <body>
  2.     <div class="app">
  3.         <p>用户名：{{username}}</p>
  5.     </div>
  7. </body>

然后通过vue实例并挂载
注：首先创建一个常量app 然后调用Vue中的createApp属性，里面有一个data方法，直接在data方法中返回上方username的值保存到常量中，调用mount方法将他挂载到上方的div上 渲染到页面中

  1.     <script>
  2. const app = Vue.createApp({
  3.         data(){
  4.           return{
  5.             username:'马老师'
  6.           }
  7.         },
  8.       }).mount('.app');
  9.     </script>

2.数据注入
数据注入就是在通过data将和对象数据绑定之后，可以通过vue实例直接调用数据内容获取上方的div中的数据

  1.  console.log(app.$data.username);
  2.  也可以用简化语法直接调用：
  3.  console.log(app.username);
  1. 响应式：可以通过vue实例，进行实时更新
  2.   app.username = '张老师';
Vue指令：v-text，v-html
  1. vue的指令 以 “ v-“ 为前缀
  2. v-text 在标签中直接填入相应内容（只能填入文本）
  3. v-html 可以将标签一起解析并输出 （可以解析标签以及标签中添加的样式）
  1.  <div class="app">
  2.         <!-- v-text -> textContent -->
  3.         <!-- <p>用户名: <span v-text="username"></span></p> -->
  4.         <!-- v-html -> innerHTML  -->
  5.         <p>用户名: <span v-html="username"></span></p>
  6.       </div>
  7.       <script>
  8.         const app = Vue.createApp({
  9.           data() {
  10.             return {
  11.               username: '西安',
  12.             };
  13.           },
  14.         }).mount('.app');
  15.         app.username = '<i style="color:red">南京/i>';
  16.       </script>

vue中的样式绑定
先创建一个行内样式style

  1. <style>
  2.       .active {
  3.         color: red;
  4.       }
  5.       .bgc {
  6.         background-color: yellow;
  7.       }
  8.     </style>

行内样式style,用v-bing样式绑定的style:

  1. <script src="https://unpkg.com/vue@3"></script>
  2.     <style>
  3.         .active{
  4.             color: red;
  5.         }
  6.         .bgc{
  7.             background-color: aquamarine;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.    <div class="app">
  14. <p v-bind:style="{color: textcolor,  backgroundColor:bgc}">PHP</p>
  15. <p v-bind:style="[base,custom]">PHP</p>
  17.    </div>
  19.    <script>
  20. const app = Vue.createApp({
  21.     data( ) {
  22.             return {
  23.                 textcolor: 'green',
  24.                 bgc:'wheat',
  26.                 base:{
  27.                     border:'1px solid',
  28.                     background:'lightgreen'
  29.                 },
  31.                     custom:{
  32.                         color:'while',
  33.                         padding:'15px'
  34.                     }
  35.                 }
  36.             }
  37.         }).mount('.app');
  42.    </script>
  43. </body>
  44. </html>
  1. 类样式: class 
  1.     <title>样式绑定</title>
  2.     <script src="https://unpkg.com/vue@3"></script>
  3.     <style>
  4.         .active{
  5.             color: red;
  6.         }
  7.         .bgc{
  8.             background-color: aquamarine;
  9.         }
  10.     </style>
  13. </head>
  14. <body>
  15.    <div class="app">
  16. <p v-bind:class="active">Hello 猪老师</p>
  19. <!------- classList  -------->
  20. <!------ 在添加类样式时，可以通过true和false 来控制是否有效（同时这个值也可以添加到一个变量中） ------>
  21. <p v-bind:class="{active: isActive}">Hello 钟老师</p>
  22. <p class="active bgc">Hello 月月老师</p>
  26. <!------ v-bind:是高频指令, 可简化为冒号 : ------>
  27. <p :class="['active', 'bgc']">Hello 王老师</p>
  28. <p :class="[mycolor, mybgc]">Hello 马老师</p>
  29. </div>
  30. <script>
  31. const app = Vue.createApp({
  32.   data() {
  33.     return {
  35.     /* // style: 'color: blue', */
  37.       textColor: 'yellow',
  38.       bgc: 'wheat',
  39.       base: {
  40.         border: '1px solid',
  41.         background: 'lightgreen',
  42.       },
  43.       custom: {
  44.         color: 'white',
  45.         padding: '15px',
  46.       },
  47.       active: 'active',
  48.       isActive: true,
  49.       mycolor: 'active',
  50.       mybgc: 'bgc',
  51.     };
  52.   },
  53. }).mount('.app');
  56.    </script>
  57. </body>
  58. </html>

效果图：

2.双向绑定:
介绍事件，在vue中用事件：

  1. 先创建一个事件:
  2.  <div class="app">
  3. <p>
  4.  <input type="text" @input="comment = $event.target.value" :value="comment" />
  5.         <span>{{comment}}</span>
  6. </p>
  7. </div>
  1. $event:当前事件对象，在vue中要在前面加一个$符号
  2. v-on: vue的事件指令
  3. v-on: 高频指令, @表示
  1. <title>双向绑定</title>
  2.     <script src="https://unpkg.com/vue@3"></script>
  3.     <style>
  4.         .active{
  5.             color: red;
  6.         }
  7.         .bgc{
  8.             background-color: aquamarine;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.    <div class="app">
  15. <p>
  16.  <input type="text" @input="comment = $event.target.value" :value="comment" />
  17.         <span>{{comment}}</span>
  20. <!-- <input type="text" @input="comment = $event.target.value" :value="comment" />
  21.  <span>{{comment}}</span> -->
  22. <!--简化语法 -->
  23. <!-- Vue为简化双向数据绑定，创建了一个语法堂：v-mond  指令
  24. $event 事件对象，在vue不能直接用event
  25.  -->
  26.  简化语法：
  28. <input type="text" v-model="comment" :value="comment" />
  29.         <span>{{comment}}</span> 
  30.     </p>
  33. </div>
  35.         <script>
  36.       const app = Vue.createApp({
  37.         data() {
  38.           return {
  39.             comment: null,
  40.           };
  41.         },
  42.       }).mount('.app');
  44. </script>
  45. </body>
  46. </html>
  1. 延迟绑定，修饰符 
  1. <!-- 延迟绑定：修饰符 -->
  2. /*修饰符lazy*/
  3. <div class="app">
  4.     <p>
  5. <input type="text" v-model.lazy="comment" :value="comment" />
  6.         <span>{{comment}}</span> 
  7.     </p>
  10. </div>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post