10-12 钟申义 日志

10-12 钟申义 日志

什么是vue?
vue是第三方开发的,渐进式的,基于mvvm设计的,出前端的js框架。(第三方:别人写的,下载直接用;渐进式:可以逐步在项目中引入vue的各项功能,同时可以与其它技术混用;mvvm=>……)
什么是mvvm?
传统前端三大部分:html;css;js。
缺点:html和css的功能都太弱了,对于页面的改变都要js来编写,就导致需要js编写大量的重复的增删改查操作。
现代前端三大部分:数据模型(mdel) ;界面(view); 控制器(viewmodel):试图模型/控制
数据模型(model):集中保存界面中的所有变量名和变量值。模型,指程序中创建的或者从远程获取的数据,一般使用js中的data对象保存,类容会直接显示在view中。
界面(view):视图,指网页中的元素和样式,一般指的就是html和css。view是html网页中的一个需要动态加载的父元素(“div#app”)。html中的视图,也被称为模板template,如果发生template错误,那么就在HTML中查找就可以了。
控制器(viewmodel):试图模型/控制:用于替代之前的Dom/jquery操作,封装了重复的增删改查操作,把模型中的数据和view中的HTML元素“绑定”到一起。vue类型提供的就是一种强大的viewmodel对象,可以自动同步数据和页面元素。专门负责自动将模型中的变量值同步到界面中去
ViewModel的核心原理:(响应系统/虚拟Dom树)
纯前端:不需要任何后端技术就能够独立运行。
框架:包含核心功能的半成品代码,开发人员只需要根据业务的需求,添加定制自己个性化的一部分类容即可。(构造+原型)
对比原生DOM、jQuery、Vue框架:
原生Dom:必须一步一步来,一步不能少,步骤繁杂,兼容性好。
jQuery:只是对Dom的每一步进行简化,流程上并没有改变。
vue:优点:已经包含核心功能,且封装有很多重复功能,编写时不用编写重写功能。
缺点:不兼容旧浏览器,需要开发人员改变编程习惯和思维。
什么时候使用Vue?为什么使用Vue?
.Vue适用于以数据操作为主的项目(web/app),2.我们使用vue框架可以提高项目的开发效率。
el:id选择器,查找页面中需要监控的父元素,并进行绑定。(后可以跟任意选择器,但是一个viewModel对象只能绑定一个DOM元素。)
methods:所有事件处理函数放在methods对象中。
new Vue()中包含两大子系统
响应系统:new Vue()刚创建的时候,需要先引入data对象,并自动为data中每个变量添加访问器属性保护起来,所有访问器属性都直接隶属于new Vue对象。如果想要修改data中的变量,可以通过"this.变量名"的方式进行访问。但是,其实都是访问的变量的set访问器,而且,new Vue()在每个set访问器中都添加了通知机制,只要修改变量,就会自动调用访问器,只要调用了访问器,就会触发通知
虚拟Dom树:new Vue()通过扫描真是的DOM树,形成一个简化版的DOM树模型,仅包含可能变化的属性。因为真实的DOM树太大了,包含很多无关的元素和属性,不便于快速的查找,所以我们需要使用虚拟DOM树
虚拟DOM树优点:
小,遍历极快。而且只修改变化的元素,影响的范围小
封装了重复的增删改查操作,极大的减少了代码量
效率高,仅修改个人可能受影响的元素和可能受响应的属性。多数无关的元素和属性,不受影响
什么是绑定语法?
绑定语法就是专门为HTML添加变量,html本身并不支持变量,但是HTML中的个别内容又需要根据程序中的变量自动变化,当HTML中的任何一个位置的内容,需要根据程序中的变量值自动变化的时候,就需要使用绑定语法(语法: {{变量/js表达式}})
{{}}的用法:
Model变量名:{{showMessage}}
算数/比较/逻辑/三目运算(过滤器代替):算数:{{10+20}};比较:{{10>20}};逻辑:{{true&&false}};三目运算:{{sex==0?"女":"男"}}
方法的调用(计算属性代替):{{getString()}}
对象属性的访问:{{obj.name}}
数组下标访问:{{arr[1]}}
字符串的拼接:{{${str} World}}
创建对象:{{new Date().toLocaleString()}}
什么是指令?
指令就是为html添加新功能的自定义属性,因为html本身是静态的,不具有任何的动态生成能力,所以当我们想要在html中使用程序的一些特征的时候,例如:“分支”,“循环”等,就需要指令。
指令:
v-bind: 元素的属性的绑定。
普通绑定:
动态绑定:注意: “:”是“v-bind:”的缩写
v-show:控制一个元素的显示/隐藏
条件表达式 为true则显示,反之则隐藏。
v-if v-else

v-if v-else -if … v-else

v-for:会自动遍历数组/对象/字符串中的每个元素,每遍历一个元素,就会自动创建元素对象

elem:变量名 i:下标
:key : 效率高——是在内存中为每个html元素副本添加一个唯一标识。如果每个html元素副本都有唯一的标识,则每次修改数组元素的时候,v-for只需要找到受影响的那一个html元素副本,修改即可。其余不受影响的html元素副本保持不变
v-on 注意:v-on: 可以缩写 @
普通绑定
动态绑定
问题:如果我们将button按钮换成a标签,href=".."属性,默认会改变我们的地址栏或跳转到其他页面(解决问题:(阻止默行为))
js中

function(e){

​ e.preventDefault();

}

vue中

fn(e){

​ e.preventDefault();

}

v-html绑定html片段:

变量名:"

Hello World

"

v-cloak:防止用户短暂看到{{}}的语法
《any v-cloak>{{message}}</any》(手动添加一个属性选择器,隐藏所有加v-cloak的元素
[v-cloak]{display:none;} 原理:在程序开始的时候,需要由我们手动添加display:none。)
v-text:是{{}}的等效指令,只不过v-text是写在属性中的,而{{}}是写在内容中的给需要隐藏的元素添加v-text,v-text的后面就是我们要显示的内容

v-pre:保护{{}}中的内容不被编译

{{info}}

v-once 唯一不变元素:当前元素的{{}}语法对应的数据只能绑定一次,以后即使模型数据发生改变,也不会再改变了。

{{name}}

心得

vue理解起来还行。

标签

评论