search

博客列表 >VUE基本语法

VUE基本语法

初见
初见原创
2021年11月04日 10:11:56736浏览

Vue 模板语法

  • options 基础定义
  1. // options 是 vue 实例参数
  2. export default {
  3.   name: "App3",
  4.   //属性
  5.   data() {//看成App3的方法属性
  6.     return {
  7.       msg: 'xiaoming',
  8.       tips:'系统提示'
  9.     }
  10.   },
  11.   //计算属性
  12.   computed:{
  14.   },
  15.   //加载组件
  16.   components:{
  18.   },
  19.   //生命周期
  20.   mounted() {
  21.   },
  22.   //方法
  23.   methods:{//看成APP3中的方法
  24.     fun(){
  25.       console.log(this.msg);
  26.       console.log('22222');
  27.     },
  28.     fun2(){
  29.       this.fun();
  30.       console.log('3333');
  32.     }
  34.   }
  35. }
  • MVVM 模式（Model-View-ViewModel）

MVVM

  1. <template>
  2.   <div>
  3. <!--    插值：{{}}-->
  4.     这是界面<hr />
  5.     {{msg}}<hr />
  6.     {{tips}}
  7.     {{fun2()}}<hr/>
  8. <!--    v-model双向绑定-->
  9.     <hr/>
  10.     <input type="text" v-model="msg">
  11.     <hr/>
  12. <!--    变量能解决的，尽量不要写语法-->
  13.     {{msg + 'hello'}}
  14.     <hr/>
  15.     {{num*5-98}}
  16.     <hr/>
  17. <!--    大写-->
  18.     {{msg.toUpperCase()}}
  19.     <hr/>
  20. <!--    指令：v- -->
  21. <!--    v-once 只显示初值 不相应式-->
  22.     <b v-once>{{msg}}</b>
  23. <!--    内容原封不动的展示-->
  24.     <p v-pre>{{msg}}</p>
  25. <!--    就相当于插值表达式的功能-->
  26.     <p v-text='msg'></p>
  27. <!--    可以解析标签-->
  28.     <p v-html='title'></p>
  29.     <hr/>
  30.     ------------------------------<br>
  31.     <hr/>
  32.     <hr/>
  33.   </div>
  34. </template>
  36. <script>
  37. // options 是 vue 实例参数
  38. export default {
  39.   name: "App3",
  40.   //属性
  41.   data() {//看成App3的方法属性
  42.     return {
  43.       msg: 'xiaoming',
  44.       tips:'系统提示',
  45.       num:100,
  46.       title:'<b>我是标题</b>'
  47.     }
  48.   },
  49.   //计算属性
  50.   computed:{
  52.   },
  53.   //加载组件
  54.   components:{
  56.   },
  57.   //生命周期
  58.   mounted() {
  59.   },
  60.   //方法
  61.   methods:{//看成APP3中的方法
  62.     fun(){
  63.       console.log(this.msg);
  64.       console.log('22222');
  65.     },
  66.     fun2(){
  67.       this.fun();
  68.       console.log('3333');
  70.     }
  72.   }
  73. }
  74. </script>

基础

  • v-bind 绑定属性
  1. 插值{{}}只能用在模板内容中，用于动态内容绑定
  2. 如果希望元素的属性也可以动态绑定，需要通过 v-bind 指令
  3. “v-bind”缩写“：”（语法糖）
  4. 绑定有意义元素中的属性
  5. 绑定 class 属性，四种用法（字符串，数组，对象，方法）
  6. 绑定 style 属性
  7. <div
  8.     style="font-size:20px;color:red;width:100px;height:100px;background:yellow;"
  9.     :style="style1+';'+style2"
  10. >
  11. </div>
  12. <div
  13.         style="font-size:20px;color:red;width:100px;height:100px;background:yellow;"
  14.         :style="[style1,style2]"
  15.     >
  16.     </div>
  18. 驼峰  背景颜色 背景图片
  19.     <div
  20.         style="font-size:20px;color:red;width:100px;height:100px;background:yellow;"
  21.         :style="{fontSize:'30px', color:'blue'}"
  22.     >
  23.       hello world
  24.     </div>
  26. <div class="wh one" :class="class1">vue</div>
  27.     <div class="wh one" :class="['two', 'three']">vue</div>
  28.     <div class="wh one" :class="{two:true}">vue</div>
  29. <!--    点击显示或隐藏-->
  30.     <div @click="show=!show"  class="wh one" :class="['two', 'three']">vue</div>
  31.     <div class="wh one hide" :class="{show:show}">vue</div>
  32.     <div class="wh one hide" :class="['three',{show:show}]">vue</div>
  • 计算属性
  1. 计算属性关键词: computed。 
  2. 计算属性在处理一些复杂逻辑时是很有用的。
  4. computed: { 
  5. site: { 
  6. // getter 
  7. get: function () {
  8. return this.name + ' ' + this.url 
  9. },
  10. // setter 
  11. set: function (newValue) {
  12. var names = newValue.split(' ') 
  13. this.name = names[0] 
  14. this.url = names[names.length - 1]
  15. } 
  16. } 
  17. }
  19. <h1>{{ title }} -- {{ subtitle }}</h1>
  20.     <h1>{{ title + ' -- ' + subtitle }}</h1>
  21.     <h1>{{ atitle() }}</h1>
  22.     <h1>{{ alltitle }}</h1>
  24.  computed:{
  25.         // alltitle:{
  26.         //   get(){
  27.         //     return this.title+'-'+this.subtitle;
  28.         //   }
  29.         // },
  30.         //简写
  31.         alltitle()
  32.         {
  33.           return this.title + '-' + this.subtitle;
  34.         }
  35.       }
  • 事件监听
  1. 绑定事件监听器指令：v-on
  2. 缩写： @ （语法糖） 
  3. 参数： $event
  5. <template>
  6.   <div>
  7.     <button v-on:click="show=!show">按钮</button>
  8.     <button @click="show=!show">按钮</button>
  9.     <button @click="active()">按钮</button>
  10.     <div @mouseenter="one('aaa',$event)" @mouseleave="two()" class="wh one hide" :class="{show}">vue</div>
  11.   </div>
  12. </template>
  14. <script>
  15. // options 是 vue 实例参数
  16. export default
  17.     {
  18.       name: "App3",
  19.           //属性
  20.           data()
  21.       {//看成App3的方法属性
  22.         return {
  24.           title: '我是标题',
  25.           subtitle: '我是子标题',
  26.           show: true
  28.         }
  29.       }
  30.     ,
  32.       //加载组件
  33.       components:{
  35.       }
  36.     ,
  37.       //生命周期
  38.       mounted()
  39.       {
  40.       }
  41.     ,
  42.       //方法
  43.       methods:{//看成APP3中的方法
  44.         fun()
  45.         {
  46.           console.log(this.msg);
  47.           console.log('22222');
  48.         }
  49.       ,
  50.         atitle()
  51.         {
  52.           console.log('@@@@@@@@@@@@@@@@@@@@');
  53.           return this.title + '-' + this.subtitle;
  54.         }
  55.       ,
  56.         fun2()
  57.         {
  58.           this.fun();
  59.           console.log('3333');
  61.         },
  62.         active(){
  63.           this.show=!this.show;
  64.         },
  65.         one(args,e){
  66.           console.log('1111111'+args);
  67.           console.log(e);
  68.         },
  69.         two(){
  70.           console.log('2222222222');
  71.         }
  73.       }
  74.     }
  75. </script>
  77. <style scoped>
  78. .wh {
  79.   width: 100px;
  80.   height: 100px;
  81. }
  83. .one {
  84.   border: 2px solid blue;
  85. }
  87. .two {
  88.   color: red;
  89. }
  91. .three {
  92.   background: yellow;
  93. }
  95. .hide {
  96.   display: none;
  97. }
  99. .show {
  100.   display: block;
  101. }
  103. .top {
  104.   width: 100px;
  105.   height: 100px;
  106.   background: blue;
  107. }
  109. .center {
  110.   width: 200px;
  111.   height: 200px;
  112.   background: green;
  113. }
  115. .bottom {
  116.   width: 300px;
  117.   height: 300px;
  118.   background: red;
  119. }
  120. </style>
  122. v-on 事件修饰符号 
  123. .stop 阻止事件冒泡 
  124. .self 当事件在该元素本身触发时才触发事件 
  125. .capture 添加事件侦听器是，使用事件捕获模式 
  126. .prevent 阻止默认事件 
  127. .once 事件只触发一次
  129. <div @click="bottom()" class="bottom">
  130.       <div  @click="center()" class="center">
  131.         <div @click="top()" class="top"></div>
  132.       </div>
  133.     </div>
  134.     从top到bottom冒泡
  135.     <div @click.stop="top()" class="top"></div>
  136.     .stop阻止冒泡
  137.     .self 点击自己触发
  138.     .self.stop 连用
  139.     .capture 捕获
  140.     <a href="http://www.php.cn" @click.prevent.once="center">php.cn</a>
  • 条件分支指令
  1. v-if 和 v-show 
  2. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子 组件适当地被销毁和重建。
  3. v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单 地基于 CSS 进行切换 
  4. v-if v-else 
  5. v-if v-else-if v-else
  7. <button @click="show = !show">button</button>
  8.     <div v-if="show" class="wh one two">if</div>
  9.     <div v-else class="wh one center"></div>
  10.     <div v-show="show" class="wh one two">if</div>
  • 循环遍历指令
  1. 遍历指令：v-for
  2. 遍历数组 v-for=”(item, [index]) in 数组”
  4. 遍历数字
  5. <div v-for="item in 5">{{item}}=====11111111111111</div>
  6. 遍历数组
  7. <div v-for="(item,index) in arrs.slice(3)">{{idnex}}----{{item}}=====11111111111111</div>
  8. 遍历对象
  9. <div v-for="(item,key,index) in objs">{{index}}--{{key}}--{{item}}</div>
  11. <!--    <div v-for="(item,index) in users">{{index}}&#45;&#45;{{item.name}}</div>-->
  12.     <div v-for="(item,index) in users" :key="item.id">
  13.       <div v-for="item2 in item">{{item2}}</div>
  14.     </div>
  15. //:key="index" 唯一值
  16. vue 中列表循环需加:key="唯一标识" 唯一标识可以是 item 里面 id index 等，因为 vue 组件高度复用增加 Key 可以标识组件的唯一性，为了更好地区别各个组件 key 的作用 主要是为了高效的更新虚拟 DOM，使用 diff 算法的处理方法，对操作前后的 dom 树同 一层的节点进行对比，一层一层对比
  18. <div><input type="text" v-model="name">
  19.       <button @click="add()">添加</button>
  20.     </div>
  21.     <ul>
  22.       <li v-for="(item, index) in books" :key="item.id">
  23.         <input type="checkbox"> {{ index + 1 }}-{{ item.name }}&#45;&#45;￥{{ item.price }}
  24.       </li>
  25.     </ul>
  27. return {
  28.       name: '',
  29.       newid: 6,
  30.       books: [{id: 1, name: '细说 PHP', price: 158, active: false},
  31.         {id: 2, name: '细说网页制作', price: 158, active: false},
  32.         {id: 3, name: '细说 JavaScript', price: 158, active: false},
  33.         {id: 4, name: '细说 HTML5 高级 API', price: 158, active: false},
  34.         {id: 5, name: '细说 DOM 和 BOM', price: 158, active: false},]
  35.     }
  37.  add() {
  38.       this.books.unshift({id: ++this.newid, name: this.name, price: 128, active: false});
  39.       this.name = '';
  40.       console.log(this.books);
  41.     }
  • v-model
  1. v-model 指令的本质是： 它负责监听用户的输入事件，从而更新数据，并对一些极端 场景进行一些特殊处理。同时，v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，它总是将 vue 实例中的数据作为数据来源。 然后当输入事件发生时， 实时更新 vue 实例中的数据。
  2. 实现原理： <input v-bind:value="message" v-on:input="message = $event.target.value" /> 
  3. v-model 的修饰符号： 
  4. .lazy 懒加载修饰符 
  5. .number 修饰符让其转换为 number 类型 
  6. .trim 修饰符可以自动过滤掉输入框的首尾空格
  8. <input type="text" name="usrname"  v-model.lazy="msg"><br>
  9. <input type="number" name="usrname"  v-model.lazy.number.trim="msg">
  10. <br>
  11.  #{{msg}}#
  12.  <input type="radio" v-model="sex" value="1">男
  13.     <input type="radio"  v-model="sex" value="2">女
  15.     <input type="checkbox" v-model="isA"> 同意协议
  17.     <br>
  19.     <input type="checkbox" value="php" v-model="lang"> PHP <br>
  20.     <input type="checkbox" value="java" v-model="lang"> java <br>
  21.     <input type="checkbox" value="vue" v-model="lang"> vue <br>
  22.     <input type="checkbox" value="react" v-model="lang"> react <br>
  24.     {{lang}}
  26.     <br>
  27.     <select name="lang" size="5" multiple v-model="language" id="">
  28.       <option value="php">-- 请选择 --</option>
  29.       <option value="java">java</option>
  30.       <option value="python">python</option>
  31.       <option value="go">go</option>
  32.       <option value="vue">vue</option>
  33.       <option value="react">react</option>
  34.     </select>
  36.     <br>
  37.     {{language}}
  39.     msg:'php.cn',
  40.       name: '',
  41.       sex:'1',
  42.       isA:true,
  43.       lang:[],
  44.       language:[],

v-model

  • 购物车

思路分析：
1、商品数组列表使用 v-for=”(item,index) in arrs” 进行遍历
2、商品数组列表是否为空，使用v-if v-else
3、列表循环需加:key=”唯一标识”
4、选中布尔值、编号，名称，数量，价格都可以存在商品数组中
5、商品删除使用方法 和 splice
6、购买数量增加减少使用 @click ++ 和 —
7、总价使用 computed 进行计算
8、价格浮点 toFixed

  1. <template>
  2. <div>
  3.   <div class="good">
  4.     <h1>购物车</h1>
  5.     <div v-if="books.length<=0">购物车为空，去购物</div>
  6.     <table v-else>
  7.       <thead>
  8.       <tr>
  9.         <th></th>
  10.         <th>编号</th>
  11.         <th>商品名称</th>
  12.         <th>价格</th>
  13.         <th>数量</th>
  14.         <th>操作</th>
  15.       </tr>
  16.       </thead>
  17.       <tbody>
  18.       <tr v-for="(item,index) in books">
  19.         <td><input type="checkbox" v-model="item.checkbox"></td>
  20.         <td>{{item.id}}</td>
  21.         <td>{{item.name}}</td>
  22.         <td>{{item.price.toFixed(2)}}</td>
  23.         <td>
  24.           <button @click="item.num--" :disabled="item.num<=1">-</button>
  25.           {{item.num}}
  26.           <button @click="item.num++">+</button>
  27.         </td>
  28.         <td><a href="#" @click.prevent="del(index)">删除</a></td>
  29.       </tr>
  30.       </tbody>
  31.       <tfoot>
  32.       <tr>
  33.         <td colspan="3">总价</td>
  34.         <td colspan="3">{{ totalPrice }}</td>
  35.       </tr>
  36.       </tfoot>
  37.     </table>
  38.   </div>
  39. </div>
  40. </template>
  42. <script>
  43. export default {
  44.   name: "Shop",
  45.   data(){
  46.     return{
  47.       books:[
  48.         {id:1,name:'细说PHP',price:98,num:1,checkbox:true},
  49.         {id:2,name:'细说JavaScript',price:188,num:1,checkbox:true},
  50.         {id:3,name:'细说网页制作',price:99,num:1,checkbox:true},
  51.         {id:4,name:'细说 DOM 和 BOM',price:188,num:1,checkbox:true},
  52.         {id:5,name:'细说 HTML5 高级 API',price:168,num:1,checkbox:true},
  53.         {id:6,name:'细说 Ajax 高级 jQuery',price:118,num:1,checkbox:true},
  54.       ]
  55.     }
  56.   },
  57.   computed:{
  58.     totalPrice:{
  59.       get(){
  60.         let sum=0;
  61.         for(let book of this.books ){
  62.           if(book.checkbox){
  63.             sum += book.price*book.num;
  64.           }
  65.         }
  66.         return '￥'+sum.toFixed(2);
  67.       }
  68.     }
  69.   },
  70.   methods:{
  71.     del(index){
  72.       this.books.splice(index,1)
  73.     }
  75.   }
  76. }
  77. </script>
  79. <style scoped>
  80. .good{
  81.   text-align: center;
  82.   width: 860px;
  83.   margin: 20px auto;
  84. }
  85. h1{font-weight: bold}
  86. table{width: 100%;
  87.   border-collapse: collapse;
  88.   border-spacing: 0;
  89. }
  90. tr{
  91.   line-height: 40px;
  92. }
  93. th{
  94.   border-width: 1px;
  95.   border-style: solid;
  96.   border-color: #333;
  97.   font-weight: bold;
  98. }
  99. td{border-width: 1px;
  100.   border-style: solid;
  101.   border-color: #333;}
  102. </style>

购物车

上一条：树莓派是什么 树莓派能做什么 树莓派的功能用途下一条：必看2：快速定位问题：云服务器上dns解析异常怎么修复
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多