Vue基础

Vue简介

vue更简单，与小项目有关，react通常和大项目相关（构建大型环境）

渐进式框架

 

去vue官方网站，点下载，如何安装vue，直接script标签引入即可。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

挂载：

外围结构用id='app'包裹，script标签里创建一个vue的实例对象。

用声明式引用（data里的变量）改变变量的值，页面视图会自动发生变化。

 

el是element的意思

methods里可以放方法。html便签里用@+事件名绑定事件

 

directive   指令

是只有vue有，react没有的。作者讲data里的数据进行了遍历，然后进行一系列处理绑在window下(双向绑定)

作用：把声明式的变量通过不同指令渲染在页面上。

 

 

文本类指令：

直接指令：{{   }}---------文本指令，绑定一个值渲染，是有过程的，因而在页面刷新较快时，可以先看到{{}}出现一瞬间，在看到渲染的值。

解决方法：

v-text='变量名'，这里双引号里的不是字符串，而是指令的值，可以用js表达式的形式展现。

 

v-once(也是一个文本类指令),它需要搭配直接指令(即文本插值使用)，他渲染的变量只展示初始值，后续不会再改变，不会更新。

 

 

v-html='content',会解析vue实例对象下的content属性里的标签，类似于js里的innerHTML，可以给content里放script标签，且不用担心被他人用script攻击，因为vue作者尤玉溪已经做好了浏览器保护处理。

 

 

v-text='content',与上面类似，但是不解析标签，只有文本。

 

动态绑定属性：

v-bind用于动态绑定HTML标签属性

简写：        : + 属性名

 

:style='   '，这里的双引号里传的是一个对象，属性名用驼峰写法。

这里可以赋值为一个变量，然后在data里写一个对象。

或者

:class='   ',同上，也可以赋值为一个变量，然后在data里给变量写值，或者直接传一个对象

style里先写好.red为color:red;

例如：:class='{"red":true}'，或者提取出true换成一个变量,如     :class='{"red":bol}',再在data里给bol赋值.

再或者    :class='["red"]'，类名里带了-必须要用引号括起来。

 

 

列表循环

为了渲染数组里的值，

v-for= '(item,index)' in arr;（一个值就是代表item）

 

 

 

对象渲染

为了渲染对象里的值

v-for='(value,key,index) in username'；

凡是遍历对象，三个参数分别代表value,key,index.

 

所有事件都要放在实例对象下的methods方法里.

 

 

v-show

<span v-show='show'></span>

若data里的show属性值为false，则这个标签不显示，是修改样式（display:none）的形式，性能消耗更小

 

v-if

<span v-if='index'>AAAA</span>

若data里的index这个属性的值为false，则这个标签不显示(以删除形式消失，此处与v-show不同)，性能消耗更大

 

若想做到四个span轮流显示，则需要给index定义一个值。

然后用v-else-if，完成判断。

(v-if,v-else-if,v-else)，都是通过直接移除DOM来隐藏.

 

 

绑定事件：v-on

所有的事件都必须放在vue实例的methods里进行定义。

简写：@+事件    如:    @click

 

 

事件传参

直接绑定事件时传参.然后methods形参接受到的就是这个实参的值。

 

选项卡例子：

 

 

事件对象：

@click='tabClick(1,$event)';-------事件对象只有这一种写法，必须要写出来，且是第二个参数。

 

v-model只用于表单的取值.