vue.js 学习:https://cn.vuejs.org/
vue.js下载链接:https://pan.baidu.com/s/17ronmiYJxrrBW6m7m7Zuzg
提取码:tfv7
vue.js 是一套构建用户界面的渐进式框架,是一个JavaScript MVVM库,用于在Web上构建UI,与Angular.js和react4.js并称为前端三大框架,只关注视图层,主要支持移动端,也支持PC端。Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。
框架是一套完整的解决方案,库(插件)提供某一个功能。
MVC是后端的分层开发概念,MVVM是前端视觉层的概念,主要关注视觉层分离。
ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。
app.js ----项目的入口模块,app.js没有路由分发功能
router.js ----只有路由分发功能,不负责业务逻辑的处理。
controller ----只负责处理业务,不负责处理数据的CRUD
model ----只负责操作数据库,进行数据的CRUD(C:creat,R:read,U:update,D:delete)
view ----视图层
MVVM: M保存每个页面单独的数据,VM是调度者,分隔M和V,负责中间处理,VM提供了数据的双向绑定,V指每个页面的html代码。
导入vue.js工具包:
<script src="vue-2.4.0.js"></script>
<body>
//vue的实例会控制该元素中的所有内容(V)
<div id="aa"><p>{{msg}}</p></div>
<script>
//导入vue包后,浏览器内存中多了一个vue构造函数,num对象即VM调度者
var num=new Vue({
el: '#aa', //vue要控制的区域
data:{ msg:'欢迎光临'}
//通过Vue提供的指令把数据渲染到页面上,无需手动操作DOM,data即MVVM中的M
})
</script>
</body>
v-cloak ----解决插值表达式的闪烁问题
<style>
[v-cloak]{
display: none;
}
</style>
<p v-cloak>{{ msg }}</p>
v-text -----默认没有闪烁问题,会覆盖元素中原本的内容,但插值表达式只会替换占位符。
<p v-text="msg"></p>
v-html -----用html格式显示元素内容
v-bind -----用于绑定属性,v-bind:可简写为: ,只能实现数据的单向绑定,从M绑定到V
<input type="button" value="按钮" v-bind:title="title" id="btn">
document.getElementById("btn").onclick=function(){
alert("hello");
}
v-on ----用于绑定事件,v-on: 可简写为 @
v-model -----实现表单元素和model中的双向绑定,只能用在表单元素中
<input type="button" value="按钮" v-on:click="show">
methods: {
show: function () {
alert("hello");
}
在VM实例中,访问数据用this.方法名或属性名。
制作字符串跑马灯与停止效果:
show(){
setInterval(()=>{
var start=this.msg.substring(0,1); //截取第一个字符
var end=this.msg.substring(1); //截取之后的字符
this.msg=end+start;
},400)
},
stop(){
clearInterval(this.intervalid);
this.intervalid=null;
}
事件修饰符:
.stop ----阻止冒泡
.prevent ----阻止默认行为
.capture ----实现捕获触发事件的机制
.self ----实现只有点击当前元素时才会触发事件
.once ----只触发一次事件处理函数
vue中使用样式::
1、传递一个数组,数组中可以使用三元表达式(可以用对象代替),在为class使用v-bind绑定对象时,对象属性是类名。
<h1 :class="['thin', ‘italic’, flag?'active':'',
{'active':flag}]">哈哈哈</h1>
2、使用内联样式,
<h1 :style="{color:'#aaa','font-weight':200}">哈哈哈</h1>
<h1 :style="styleobj1, styleobj2">哈哈哈</h1>
data:{
styleobj1 : {color:'#aaa','font-weight':200}
}
在遍历对象的键值对时,除了有val和key,还有索引值i。
<p v-for="( item, i ) in list">索引值:{{ i }} --- 每一项:{{ item }}</p>
<p v-for="( val, key, i ) in list">值是:{{ val }} --- 键是:{{ key }}
---索引值:{{ i }}</p>
<p v-for="count in 10">这是第{{ count }}次循环</p>
//in后可以放普通数组,对象数组,对象和数字,用数字时,count值从1开始
<p v-for="user in list">索引值:{{ user.i }} --- 每一项:{{ user.item }}</p>
data:{
list:{
{id:1,name:'zs1'},
{id:2,name:'zs2'}
}}
v-for循环时,key属性只能用number获取string,只能用v-bind形式指定key的值。
<div>
<label>id:
<input type="text" v-model="id">
</label>
<label>name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" ,@click="add">
<p v-for="item in list" :key='item.id'><input type="checkbox">{{item.id}}
--- {{item.name}}</p>
</div>
add(){
this.list.push({ id : this.id, name :this.name})
}
v-if: 每次都会重新删除或创建元素,有较高的切换消耗
v-show: 每次都不会重新进行dom的删除或创建元素,只是切换display:none的样式,有较高的初始渲染消耗。
<h1 v-if='flag'>哈哈哈</h1>
data:{
flag:true
}