Vue之介绍以及基本指令

前端三大主流框架:

Angular:更新快,适合做大项目,比较笨重

React:是做移动端的

Vue:集合了前面2个框架的优点,数据驱动框架,中文API,轻量级,单页面高效,先进的MVVM设计模式,基于组件的开发,虚拟DOM。

特点:

1.单页面的web应用

2.数据驱动

3.数据的双向绑定

4.虚拟DOM

导入和使用

官网地址:https://cn.vuejs.org/

开发版本:vue.js
生产版本:vue.min.js

其实一个就是压缩版本的,一个就是没有压缩的,本质上没有什么区别


使用:
"app"> {{ }}

实例成员-挂载点

"wrap"> {{ }}
class="main"> {{ }}

class="main"> {{ }}
注意: 1.html和body页面不能作为挂载点 2.一个页面可以有多个实例对应多个挂载点 3.一个vue对象挂载点只匹配找到的第一个,所以挂载点一般用id标识,标识唯一性。 4.挂载点也可以看成你vue可以控制的区域,这就是vue可以控制小到一个变量,大到整个页面。
View Code

 

js对象字典补充

let b = 20;
let dic = {
    a: 10,  // 字典本身就是对象,key都是字符串形式可以省略引号
    b  // 值为变量时,且与key同名,可以简写
};
console.log(dic)


也就是如果你的v与k同名,可以简写一个即可

 

实力成员-数据

) 用实例成员data为vue环境提供数据,数据采用字典{}形式
) 在插值表达式{{}}中,直接书写数据的key来访问数据
) 在外部通过接受实例的变量app,访问实例成员(实例成员都用$开头),间接访问到数据     app.$data.info
4) 在外部也可以通过实例变量app直接访问数据
    app.info
5)  在vue实例内部的方法methods中,使用变量,this.info (this其实就是等价于app)
this就相当于当前对象自身
"app">

{{ info }}

{{ info }}

{{ num }}

{{ arr }}

{{ dic }}

实例

实例成员-过滤器

// 1) 过滤器本身就是数据处理函数,可以将插值表达式中的数据作为参数进行处理,得到的函数返回值就是处理后的结果
// 2) 过滤器使用语法 {{ ...变量 | 过滤器(...变量) }}
// 3) 过滤器在实例中用filters成员提供



"app">

{{ num + 3.5 }}

{{ msg.split('')[4] }}

{{ num | f1 }}

{{ 10, 20, 30, 40 | f2 }}

{{ 10, 20 | f2(50, 80) }}

{{ 120 | f2 }}

文本指令

插值表达式,同v-text指令,渲染普通文本,
v-html指令可以渲染有html语法的文本,能够解析html语法
文本指令中可以渲染变量也可以渲染常量
"app">

{{ info }}

"info">

"123">

"true">

"'abc' + info">

"[1, 2, 3]">

"`好的`">

"'好的'">

属性指令v-bind:属性名=‘变量值’

语法:v-bind:属性名='变量值'


简写:    :属性名=‘变量值’

单属性绑定   :title=‘变量’  :id=‘变量’   :自定义属性=‘变量’
style属性      :style=‘字典变量’  |    :style=‘{css属性1:变量1,....}
class属性      :class='变量’   |  :class=[ 变量1,变量2.....变量n  ]
class=’{类名:布尔值}

"zh">

    "UTF-8">
    属性指令
    


    
"app">

"p1" class="p1" style="" title="" index="">属性指令1

"p2" v-bind:class="p1" style="" title="" index="">属性指令2

"p1">自定义属性也可以被vue绑定1

"p1">自定义属性也可以被vue绑定2

"'文本提示'">悬浮文本提示

"myStyle">样式绑定1

"{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2

class="myc1">样式绑定3

class="[myc2,myc3,myc4,'bbb']">样式绑定4

class="{xxx:yyy}">样式绑定5

"clickAction" :class="{ttt:yyy}">点击切换类

 

动态修改文本样式案例


"zh">

    "UTF-8">
    
    


    
"app">
class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}

 

表单指令v-model

语法:  v-model='控制value值的变量'

:value='变量‘是直接绑定不会实时更新,而v-model='控制value值的变量’则是实时更新。
单独复选框作为确认框时,v-model绑定的变量为布尔值

多复选框,v-model绑定的变量值是一个列表(数组),存放复选框选项值(谁被选中就存放了谁)

单选框,v-model绑定的变量值是某一个选项的值(值是哪个选项的值,那个选项就被选中)

"zh">

    "UTF-8">
    
    


    
"app">
""> class="inp1" type="text" :value="info"> class="inp2" type="text" :value="info">

class="p1">{{ info }}


class="inp1" type="text" v-model="info"> class="inp2" type="text" v-model="info">

class="p1">{{ info }}


是否同意:"checkbox" name="agree" v-model="isAgree">

{{ isAgree }}

性取向: 男 "radio" name="sex" value="male" v-model="mysex">"radio" name="sex" value="female" v-model="mysex"> 哇塞 "radio" name="sex" value="others" v-model="mysex">

{{ mysex }}

兴趣爱好: 男 "checkbox" name="hobbies" value="male" v-model="myhobbies">"checkbox" name="hobbies" value="female" v-model="myhobbies"> 哇塞 "checkbox" name="hobbies" value="others" v-model="myhobbies">

{{ myhobbies }}


"submit">

 

你可能感兴趣的:(Vue之介绍以及基本指令)