什么是Vue.js?
- Vue.js是目前最火的前端框架,而React.js是当下最流行的前端框架,我们可以使用React.js进行网站开发和手机App开发,而Vue借助Weex也能实现手机App开发。而Vue.js相较于React.js来说更易入门。
- 三大前端主流框架之一(Angular.js | React.js | Vue.js)
- Vue.js主要是用于构建用户界面的框架,所以只关注视图层。
学习框架的好处
能显著地提高开发效率。
- 发展历程:
原生js(兼容性问题麻烦) --> Jquery之类的js库(极大程度解决兼容性问题,并提供了方便使用的新方法) --> 前端模板引擎(封装一些常用的模板以供调用,但渲染效率低) --> Vue.js等前端框架(减少不必要的DOM操作,从而将精力放在业务逻辑上;提高渲染效率;一些新概念新思想)。
MVC和MVCC的关系
-
MVC
一般是后端的一种开发思想,MVC分别代表Model(模型)、View(视图)和Controller(控制),用户通过前端交互可以对数据库进行操作,这个过程可以看做:在View层进行交互 --> 在Controller层处理业务逻辑 --> 在Model层对数据库进行CRUD。 - 而
MVVM
是前端页面的一种开发思想,和MVC类似,我们只是把C换成了VM。一般来说,MVVM分层开发思想是将每个页面分成了M、V、VM三个层,VM是M层和V层的调度者,也是MVVM思想的核心层。
M层一般保存着每个页面中单独的数据;
V层即HTML代码结构;
VM层是两者之间的调度者,实现了M层向V层存取数据和V层向M层存取数据,即实现了数据的双向绑定。
使用Vue.js输出hello
Vue.js的安装十分简单,我们只需要引入外部js文件即可。我们直接看代码:
Hello Vue
这是我要说的:{{msg}}
这是最基本的Vue.js的使用,Vue.js为我们提供了Vue
这个对象,我们可以进行实例化,而参数el
为elemnt的缩写,表示Vue实例绑定的页面元素,而data中我们可以存放一些我们需要使用的数据。
结合MVVM架构,我们可以发现Vue对象的实例vm即VM层,实现了数据的双向绑定,V层即id为app的
,M层即vm中的data对象,存储着页面需要使用到的数据。
v-指令
-
v-cloak
:无表达式,直接挂载。cloak有斗篷、隐藏的意思,作用是在也页面编译完成之前让元素保持display:none的属性。需要在css中加:
[v-cloak] {
display: none;
}
这样,页面就不会因为先加载后编译出现的闪烁效果。
-
v-text
:表达式:v-text = "str"。这个指令改变了元素的textContent,下面两条语句的效果是一样的:
//等价于下面的语句
{{message}}
-
v-html
:表达式:v-html = "str"。类似jquery的html(str)。
//假设message = "Hello
";
//div中显示:Hello
//div中显示:Hello,和Hello被标签包裹。
-
v-bind
:为元素绑定属性并赋值。- 缩写形式:
:
- 缩写形式:
//可以使用message变量+表达式的形式赋值给属性title。
- v-on:为元素绑定一个或多个事件。
- 缩写:
@
- 预期:function || inline statement || Object
- 参数:event
- 修饰符:
- 示例:
- 缩写:
Test
练习:跑马灯效果
Test
{{message}}
v-model实现表单元素的双向数据绑定
目前Vue.js只有v-model才是真正地数据双向绑定,即在页面修改数据同样能动态改变数据的值。
比如:
Test
{{message1}}
{{message2}}
v-bind:value和v-model的区别在于,v-model能通过表单数据的改变来更新绑定的数据值,实现双向绑定。
练习:使用双向绑定的特点来实现简单的计算器
Test
使用v-bind设置元素class和style
一般使用数组或对象来绑定,直接看实例即可:
- class
Test
规则,就是用来打破的(无style)
规则,就是用来打破的
规则,就是用来打破的
规则,就是用来打破的
规则,就是用来打破的
规则,就是用来打破的
规则,就是用来打破的
- style
Test
Jinx的含义就是Jinx.
Jinx的含义就是Jinx.
Jinx的含义就是Jinx.
Jinx的含义就是Jinx.
使用v-for进行迭代
使用v-for可迭代数组、数组对象、对象以及数字。
Test
索引:{{index}};值:{{val}}
索引:{{index}};值:{{val.id}}={{val.name}}
索引:{{index}};键:{{key}};值:{{val}}
{{val}}
使用v-for时key的注意事项
在组件中使用v-for时必须使用key属性,以标识迭代元素的唯一性。注意:key使用v-bind进行绑定,且值必须为字符串或数字。
v-if和v-show的使用
两者的值都是布尔值,根据传入的boolean来决定是否“显示”该元素。
v-if
和v-show
的区别在于,如果传入的值为true,前者才创建该元素否则不创建;而后者使用“display:none”来控制元素的显示效果,所以一定会创建出来。
所以,
-
v-if
:切换显示效果的渲染成本高。 -
v-show
:首次创建元素的渲染成本高。
即,v-if通过删除或新建元素来显示元素;而v-show先创建元素再通过display:none来控制显示效果。根据实际情况选择使用。
案例
........