VUE 基础语法：属性、指令、数据绑定

た入场券 2021-11-29 07:26 217阅读 0赞

## vue基本语法 ##

`el`绑定元素id；  
`data`数据，可以在绑定元素内使用；  
`{ { data中的key }}`Mustache语法，通过此方式绑定数据；

<div id="test-1">
      <p>{
       { message }}</p>		//通过Mustache语法取值
    </div>
    
    <script> var test1=new Vue({ el:"#test-1", data:{ message:'测试文本' } }) </script>

vue通过绑定页面元素和vue对象的模式，实现数据绑定；  
当数据变动时，会自动体现在页面，反之亦然。

## vue对象的属性 ##

除了上面提到的`el`和 `data`外，还有以下几个属性：

`methods` 方法，使用 方法名() 的方式调用；  
`computed` 计算，使用 方法名 的方式调用；  
`watch` 监听，监听数据中的某一个，格式为`方法名(val)`，其中val为更新后的值；

var test=new Vue({ 
    			el:"#test",
    			data:{ 
    				message:'测试文本',
    				number:16
    			},
    			methods:{ 
    				total:function(){ 
    						//方法
    				}			
    			}, 
    			computed:{ 
    				getNum:function(){ 
    						//方法
    				}	
    			}
    			watch:{ 
    				message:function(val){ 	//监听message这个属性，在变动时调用此方法
    						//方法
    				}	
    			}
    		})

## 指令 V-标签属性 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70]  
这些指令都是html标签的属性，和普通的html标签一样写在标签体内。

`v-bind:`绑定html属性，格式为v-bind:html属性=‘data中的key’,  
`v-bind:`可以简写为`：`

`v-show:`此元素是否展示，若为false则隐藏，可以使用`data`中的值；

`v-model`在 input、select、textarea、checkbox、radio上创建双向数据绑定，自动更新绑定的元素的值,绑定的属性须在`data`中；

data:{ 
    		message:'测试文本',
    	},

`v-on:`添加监听事件，格式为v-on:监听=‘方法名’，方法须在`methods`中；  
`v-on:`可以简写为 `@`

methods:{ 
    		change:function(){ 
    			//方法
    		}			
    	},

`v-if`条件判断,支持JavaScript表达式；

`v-for`循环,语法 对象名 in 数组名

data:{ 	//对应的数据
    		title:['可乐','咖啡','红牛']
    	},

也可以使用数组对象的属性

data:{ 	//对应的数据
    		title: [
          {  name: '可乐' },
          {  name: '咖啡' },
          {  name: '红牛' }
        ]
    	},

#### 实例属性 ####

以$开头，用来和用户定义的属性区分；

vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true

--------------------

## 购物车小案例 ##

![在这里插入图片描述][20190721230801348.png]  
html代码

<div id="test">
    		<table>
    			<thead>
    				<tr>
    					<th v-for="tit in title">{
       {tit}}</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr v-for="good in goods">
    					<td>{
       {good.id}}</td><td>{
       {good.name}}</td><td>{
       {good.price}}</td><td>{
       {good.count}}</td>
    					<td><button @click="good.count--" :disabled="good.count<1">-</button></td>
    					<td><button @click="good.count+=1">+</button></td>
    				</tr>
    			</tbody>
    		</table>
    				<p>总价：{
       {total()}}</p>
    	</div>

js代码

###### 其他 ######

这两种方法效果相同；  
因为无论是操作原数组对象，还是操作data属性，另一个的值也会同时改变；

// totalPrice+=list[i].price*list[i].count;
    		totalPrice+=this.goods[i].price*this.goods[i].count;

methods和computed  
methods需要加上小括号

<p>总价：{
       {total()}}</p>

computed不能加小括号

<p>总价：{
       {total}}</p>

在定义上methods就是方法，而computed是计算（得出的值）；  
methods每次调用执行一次；  
computed在开始时执行一次，只要得出这个值的依赖没有改变，则后续调用返回第一次计算的值；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70]: /images/20211129/bbb592853100475e8564d0d6d75e0d25.png
[20190721230801348.png]: /images/20211129/1f9d04eb9f2e4f59874e40b52a284e17.png