-
Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
-
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
-
Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
-
前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;
-
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
- node 中的 express;
- 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
-
- 从Jquery 切换到 Zepto
-
- 从 EJS 切换到 art-template
具体配置vue的过程
(1)首先在自己的项目里面引入vue.js
(2)新建new vue()
(3)使用el和data来指定自己要操作的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../code/lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"welcome to vue"
}
})
</script>
</body>
</html>
重要vue标签的含义
1.首先是{{text}}使用此标签可以显示自己定义的内容
2.v-cloak可以解决插值表达式闪烁的问题
3.v-text和插值表达式功能类似,都是在div里面显示自己定义的内容,但是v-text没有闪烁问题,并且会覆盖之前的内容(占位符)
4.v-html可以转义自己写的内容
5.v-bind可以绑定自己的数据(绑定属性) v-bind == :即可以简写
6.v-on:click绑定事件机制,然后在methods:里面定义自己的方法
v-on:mouseover鼠标移动到按钮上就出发事件
v-on缩写为@click
7.获取Vue内部自定义的数据一般是使用this关键字获取
8.截取字符串this.msg.substring(0,1) 0表示从第一个字符串截取,截取一个字符
9.锥子函数
setInterval( () =>{
var start = this.msg.substring(0,1)
var end = this .msg.substring(1)
this.msg = end + start
},400)
10使用@click.stop可以阻挡冒泡的方法调用
@click.prevent 可以阻止默认行为,可以阻止所有人的
@click.capture 可以出发捕获事件,从外往里执行
@click.self 点击谁就执行谁,只会阻止自己的,不会阻止其他人的
@click.once只会出发一次默认事件
11v-model可以实现双向数据绑定
12 eval(参数)函数将参数转换成数字,这是一种投机取巧
13 v-for 使用<p v-for="(item,i) in list">{{i}}----{{item}}</p>
获取对象的下标和内容,也可以是复杂数据类型