• vue基础语法

    目录

    模板语法

    1、插值

    1.1简述表达式语法

    1.2 html

    1.3 属性

    1.4 核心指令

     1.v-if |v-else-if|v-else

    2.v-show

    3 v-for

    2. 过滤器

    3、设置计算属性

    4、设置监听器

    今天给大家分享一下，vue的基本语法模板，如果哪里不对的地方，欢迎大家指明。

    模板语法

    1、插值

    使用{{msg}}的形式，标签将会被替换成为数据对象（data）上msg属性值，当绑定的数据对象上的msg属性值发生变化时，插值处（模型data）的值也会发生变化（双向绑定）

    效果展示

    HTML代码 

    1.      <div id="app">
    2.             <h2>{{dog}},{{ts}}h2>
    3.             <h1>{{6*8+1}}h1>
    4.             <h1>{{test?'true':'false'}}h1>
    5.             <h1>{{1*0?'1':'0'}}h1>
    6.             <span>{{number+1}}span>
    7.             <br />
    8.             <span>{{dog.substr(0,5).toLocaleUpperCase()}}span>
    9.         <p>
    10.             <input type="text" v-bind:id="bookId"/>br>
    11.             
    12.             <input type="text" v-bind:id="'bookList_' + id"/>
    13.         p>
    14.         div>

    vue代码

    1. <script>
    2. 			new Vue({
    3. 				el:"#app",
    4. 				data:function(){
    5. 					return{
    6. 						dog:"hello，vue",
    7. 						ts:new Date().getTime(),
    8. 						test:false,
    9. 						number:11,
    10. 						bookId: 'book001',
    11. 						id: 'book002'
    12. 					}
    13. 					},
    14. 			});
    15. 			
    16. 		script>

    1.1简述表达式语法

    Vue里面的插值表达式（双花括号 { { }}）是用来输出data数据的，定义在data里面的数据，可以使用插值表达式来输出：

    例如： { { msg }}

    1. 为什么双花括号能显示出真实的数据：因为 vue会拿到vue实例所控制DOM区域（#app）里面的标签 使用vue的语法去编译它

    字面量

    1. <body>
    2.         <div id="box">
    3.             {{ 'abc' }}
    4.             {{ 123 }}
    5.         div>
    6. body>

    2.四则运算

    1. <body>
    2.     <div id="box">
    3.             
    4.             {{ 1+2 }} 
    5.             {{ 'hello' + 'word!' }} 
    6.             {{ 10*2 }} 
    7.     div>
    8. body>

    3.逻辑运算

    1. <body>
    2.     <div id="box">
    3.             {{  true&&false  }} 
    4.             {{  true || false '  }} 
    5.             {{  !true  }} 
    6.     div>
    7. body>

    4.三目运算

    1. <body>
    2.     <div id="box">
    3.             <p>{{ 20 > 18 ? '成年' : '未成年' }}p>  
    4.     div>
    5. body>

    5.全局函数

    1. <body>
    2.     <div id="box">
    3.             <p>{{ Math.random() }}p>
    4.             <p>{{ parseInt(12.23) }}p>
    5.     div>
    6. body>

    1.2 html

    {{}}插值的方式将数据处理为普通文本，如果要输出html，需要使用v-html指令
    示例：
    在data中定义一个html属性，其值为html

    1. data: {
    2.     html:  ''
    3. }

    在html中取值

    <span v-html="html"></span>

    1.3 属性

      

    点击getSelected事件时，设置为蓝色。 

    1.   <style>
    2.         .redClass{
    3.             text-align-last: center;
    4.             color: red;
    5.         }
    6.         .blueClass{
    7.             text-align-last: center;
    8.             color: blue;
    9.             }
    10.     style>
    11.     <p>设置之前:  阿巴阿巴p>
    12.     <p>设置之后: <span v-bind:class="calzz">阿巴阿巴span>p>
    13.     <button @click="changColor()">点击改变颜色button>

    vue代码

    1.    <script>
    2.         new Vue({
    3.             el:"#app",
    4.             data:function(){
    5.             return{
    6.             html:"",
    7.             calzz:'redClass',
    8.  
    9.         }
    10.             },
    11.  
    12.             methods:{
    13.                 changColor(){
    14.                     this.calzz='blueClass'
    15.                 }
    16.             }
    17.             
    18.         });
    19.     script>

    1.4 核心指令

     1.v-if |v-else-if|v-else

    根据其后表达式的bool值进行判断是否渲染该元素， 指令特性的值预期是单个 JavaScript 表达式 

    效果展示

      

    示例：
    HTML 

    1. <div v-if="type === 'A'">
    2.     type == A
    3. div>
    4. <div v-else-if="type === 'B'">
    5.     type == B
    6. div>
    7. <div v-else>
    8.     other value
    9. div>

    vue代码，可以修改data中的type值观察页面的输出。

    1.     var vm = new Vue({
    2.  
    3.         el: '#app',
    4.  
    5.         data: {
    6.             type: 'C'
    7.         }
    8.     });

    注： js = == === 之间的区别
    一个等号是赋值操作，==先转换类型再比较，===先判断类型，如果不是同一类型直接为false
    alert(1 == “1”); // true
    alert(1 === “1”); // false

    2.v-show

    如果show值为false，就不会渲染其身后表达式，而且会给这样的元素添加css代码：style="display:none"。
    当v-show 表达式true则显示，否则不显示。
    注意：使用v-show，虽然不显示，但在页面的dom中是存在的，只是display属性为none

    HTML代码 

    1. <div v-show="show === 'yes'">
    2.     show == yes
    3. div>

    在data中定义show属性

    1. var vm = new Vue({
    2.     el: '#app',
    3.     data: {
    4.         show: 'yes' 
    5.     }
    6. });

    3 v-for

    效果展示

    循环遍历

    • 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
    • 遍历对象: v-for="(value,key,index) in stu", value属性值, key属性名，index下标

     HTML代码

    1. <div id="app">	
    2. 		<br>
    3. 		<div v-for="(item,index) in items" :value="item.id">
    4. 			{{index}} -- {{item.name}} -- {{item.id}}
    5. 		div>
    6. 		
    7. 		<br>
    8. 		<div v-for="(val,key) in obj">
    9. 		    {{key}}-{{val}}
    10. 		div>
    11. 		
    12. 		
    13. 		<br>
    14. 		<div>
    15. 		    <select >
    16. 		        <option v-for="item in items" :value="item.id">{{item.name}}option>
    17. 		    select>
    18. 		div>
    19. 		<br />
    20. 		
    21. 		<div v-for="(item,index) in items">
    22. 		    {{index}}:<input type="checkbox" :value="item.id" v-model="selected">{{item.name}}
    23. 		div>
    24. 		<button v-on:click="getSelected()">获取选择button>

     vue代码

    Vue为v-bind和v-on这两个最常用的指令，提供了特定简写

    指令简写示例
    v-bind:xxx:xxxv-bind:href 简写为 :href
    v-on:xxx@xxxv-on:click 简写为 @click

    2. 过滤器

    局部过滤器的定义：

    1. var vm = new Vue({
    2.     filters: {
    3.         'filterName': function(value) {
    4.             //过滤器实现
    5.         }
    6.     }
    7. });

     全局过滤器 Vue.filter('fmtDate',function(value) { return fmtDate(value, 'yyyy年MM月dd日') });

    注意事项： 

    • 注1：过滤器函数接受表达式的值作为第一个参数
    • 注2：过滤器可以串联
      {{ message | filterA | filterB }}
    • 注3：过滤器是JavaScript函数，因此可以接受参数：
      {{ message | filterA('arg1', arg2) }}

    3、设置计算属性

    效果展示

     HTML代码

    1. <div id="app">
    2.         <div v-for="(book,index) in books">
    3.             <h1> {{index}} -- {{book.name}} -- {{book.price}}h1>
    4.         div>
    5.         <br>
    6.         <div>
    7.             <h1>总价：{{compTotal}}h1>
    8.         div>
    9.     div>

    vue代码

    4、设置监听器

    使用场景：我们可以使用监听属性watch来响应数据的变量， 当需要在数据变化时执行异步或开销较大的操作时，比如，下拉列表的级联选择

    实现数据的双向绑定，1m=100cm

     

    示例： 米和厘米的单位换算
    HTML中使用v-model实现与数据的双向绑定

    1. <div>
    2.     
    3.     米:     <input type="text" v-model="m">
    4.     厘米:  <input type="text" v-model="cm">
    5. div>

    vue代码

    1. var vm = new Vue({
    2.  
    3.     el: '#app',
    4.  
    5.     data: {
    6.         m: 1,
    7.         cm: 100
    8.     },
    9.  
    10.     //设置监听属性
    11.     watch: {
    12.         m: function(val) {
    13.             if(val)
    14.                 this.cm = parseInt(val) * 100;
    15.             else
    16.                 this.cm = "";
    17.         },
    18.         cm: function(val) {
    19.             if(val)
    20.                 this.m = parseInt(val) / 100;
    21.             else
    22.                 this.m = "";
    23.         }
    24.     }
    25.  
    26. });
  • 相关阅读:
    C 语言与 C++ 面试知识总结
    c语言练习84：动态内存管理
    Qt model/view 理解 2
    Qt项目-安防监控系统(各个界面功能实现)
    嵌入式Linux 开发经验：注册一个 misc 设备
    Java代码实现两个数据库之间的数据同步
    【回归预测-DELM】基于麻雀算法改进深度学习极限学习机实现数据回归预测附matlab代码
    Python爬虫实战案例——第四例
    Java基础-字符串
    wxml2canvas爬坑之路
  • 原文地址：https://blog.csdn.net/Bugxiu_fu/article/details/126908964