vue.js入门
学习vue需要贯彻数据驱动视图思想
vue是一个框架
相比jquery作为函数库,函数库只是一些工具来开发页面
框架直接相当于做好房子的结构,只用在框架上做一些修饰,就开发好页面
所以jquery是学习工具方法的使用,vue是学习一些指令
vue可以作为js库用,也可以用它的全套工具构建系统界面,只关注视图层,目标是通过尽可能简单的api实现响应的数据绑定,类似于后台的模版语言。
可以将界面拆分成一个个组件,通过组件来构建界面,然后用自动化工具来生成单页面(SPA - single page application)系统。单页面就是页面一层层的覆盖,模版只有一个
前端三大框架Angular.js、React.js、Vue.js
React上手比较难,适合开发大型程序;
Vue 上手简单
Vue还可以通过wbs开发移动app;mpvue可以开发小程序;可以做windows桌面应用
1.基本使用
一个vue的使用是从一个对象开始的
显示数据:从胡子语法开始Mustache{{}}
vue没有入口函数,所以可以用js的window.onload 但是工作中vue当到html的底部
//引 包
<script type="text/javascript" src="js/vue.min.js"></script>
...
<body>
<div id="app">{{ str }}</div>
</body>
<script>
var vm = new Vue({
//vue要控制的标签:el 限定vue作用范围
el:'#app',
//data:存vue的数据模型
data:{
str:'hello world',
xxx
}
})
</script>
2.Vue的模版语法
vue对象只要在他的控制范围内,能控制这个标签以及这个标签里的所有内容,意思是包括子标签
2.1数据的其他显示方法
{{}}里可以直接调用vue对象定义的数据
{{}}模版语法里面可以写原生js
<p>{{ str.split('').reverse().join('') }}</p>
可以写三元表达式:条件?条件成立:条件不成立
<div>{{ bool?'成立':'不成立' }}</div>
2.2 vue控制html属性
v-xx这是指令的意思 :具备特殊功能的语法,vv-bind控制html属性
{{<a v-bind:href="url1">百度</a>}}
{{<a :href="url1">百度</a>}}
v-bind:和:这是一个意思,控制html属性
2.3 绑定事件
绑定事件 v-on:xx=“xx”
v-on:click="num+=1"
化简写作:@click="" 这是一个意思
2.4 封装函数
methonds:{
//函数名:匿名函数
fnAdd:function(){
this.num += 1 //当前对象的num
}
}
<button @click="fnAdd(参数)">自增</button>
调用函数有参数的时候必须加()传入参数
3.控制css
两种 直接控制css属性,或者控制类改变css
数据驱动视图 data里的键值对改变 所以vue是从数据开始准备
vue控制class属性可以写字典,对象,列表
字典:在data里以布尔的型储存 这样对应控制class
字典:{‘类名’:布尔型数值} true添加类,false不添加类
<div:class={}></div>
对象型:把类放入对象里写 key是真实类名,如果取值true就添加类
列表::class="[myname1,myname2]"....data:{myname1:'aaa',myname2:'bbb'}
三元运算: :class="[bool2?'abc':'jqk',xxx]"
控制css属性:style=""和class一样也有那些方法