前端三大主流框架:
Angular:更新快,适合做大项目,比较笨重
React:是做移动端的
Vue:集合了前面2个框架的优点,数据驱动框架,中文API,轻量级,单页面高效,先进的MVVM设计模式,基于组件的开发,虚拟DOM。
特点:
1.单页面的web应用
2.数据驱动
3.数据的双向绑定
4.虚拟DOM
导入和使用
官网地址:https://cn.vuejs.org/ 开发版本:vue.js 生产版本:vue.min.js 其实一个就是压缩版本的,一个就是没有压缩的,本质上没有什么区别 使用:"app"> {{ }}
实例成员-挂载点
"wrap"> {{ }}注意: 1.html和body页面不能作为挂载点 2.一个页面可以有多个实例对应多个挂载点 3.一个vue对象挂载点只匹配找到的第一个,所以挂载点一般用id标识,标识唯一性。 4.挂载点也可以看成你vue可以控制的区域,这就是vue可以控制小到一个变量,大到整个页面。
class="main"> {{ }}
class="main"> {{ }}
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]">
"`好的`">
"'好的'">