2020-10-18 v-常见指令

落日映苍穹つ 2022-12-16 03:53 82阅读 0赞

##### 写在前面： #####

利用脚手架搭建一个Vue项目，然后开始学习。过程省略

##### 正式内容： #####

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>现代开发模式</th> 
   <th>传统开发模式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>代表</td> 
   <td>Vue/react</td> 
   <td>jQuery</td> 
  </tr> 
  <tr> 
   <td>特点</td> 
   <td>20%表现层</td> 
   <td>80%表现层</td> 
  </tr> 
 </tbody> 
</table>

现代开发模式的代表就是Vue/react,与传统开发模式的大部分精力在Class和样式中，Vue只有20%的表现层、核心在数据层

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

视图层 <——> 数据层

Vue可以视图层和数据层交换数据

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

前端渲染 vs 后端渲染

<table> 
 <thead> 
  <tr> 
   <th>前端渲染</th> 
   <th>后端渲染</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>降低服务器负担</td> 
   <td>SEO</td> 
  </tr> 
  <tr> 
   <td>带宽压力小</td> 
   <td>兼容性好</td> 
  </tr> 
  <tr> 
   <td>用户体验好</td> 
   <td>安全性高</td> 
  </tr> 
 </tbody> 
</table>

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

Vue的核心一定是数据

创建一个Vue对象

let vm = new Vue({ 
      el:'#id',  // 根组件
      data:{      // 数据
        color:'bule',
        age:18
      }
    })

在HTML中引用

<div id="id">
       颜色：{
       {color}}
       年龄：{
       {age}}
     </div>

`{ {data}}`是指令、`V-bind在标签的属性使用值，不需要双括号`

<strong title = "{
       {age}}岁">{
       {color}}</strong>	// 错误写法
    <strong v-bind:title = "age+'岁‘">{
       {color}}</strong> // 正确写法
    <strong :title = "age+'岁‘">{
       {color}}</strong> // 简写

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

#### V-bind ####

可以用于任何属性，有两个属性有另外的写法  
class、style

#### V-model ####

用来做数据\*\* 双向\*\*绑定  
主要用于输入组件

修改输入框内的内容，p标签也跟着变  
实际就是数据（data）和input之间的双向绑定  
注意：v-model进来的都是字符串

#### V-text ####

覆盖里面的所有内容 不常用

#### V-html ####

可以直接输出innerHTML

#### Vue事件 ####

##### V-on #####

`<input type="button" value="" v-on:click="fn()">`  
简称是@

#### v-show/v-if ####

v-show=“true” 显示、false隐藏  
v-if 也可以

<table> 
 <thead> 
  <tr> 
   <th>v-show</th> 
   <th>v-if</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>display</td> 
   <td>删除元素</td> 
  </tr> 
 </tbody> 
</table>

#### v-for ####

作用就是循环  
在想要的元素上使用v-for  
`<li v-for="user in users">用户名：{ {user.name}} </li>`  
`<li v-for="user,index in users">{ {index}}.用户名：{ {user.name}} </li>`

<table> 
 <thead> 
  <tr> 
   <th>数组</th> 
   <th>json</th> 
   <th>字符串</th> 
   <th>数字</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-for="item\index in array</td> 
   <td>v-for=“val,key in json”</td> 
   <td>v-for=“char,index in str”</td> 
   <td>v-for=“i in num”</td> 
  </tr> 
 </tbody> 
</table>

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

虚拟DOM——json

{ 
    	tag:'ul',
    	child:[
    		{ tag:'li',child:[
    		 ···
    		 ]}
    	]
    }

:key 属性

1.  不能变
2.  不能重复