一、Vue.js框架
1.1 概念
- 构建用户界面的渐进式框架
- 只关注图层,采用自底向上增量开发的设计
- 目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。
1.2 入门程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<p id="ap">{{message}}</p>
</body>
</html>
<script>
var vue = new Vue({
el:"#ap",
data:{
message:"hello,world"
},
methods:{
}
})
</script>
结果:输出hello,world
1.2 Vue中构造器的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<p id="ap">{{message }}{{method()}}</p>
</body>
</html>
<script>
var vue = new Vue({
el:"#ap",
data:{
message:"hello,world"
},
methods:{
method:function(){
return "Vue.js";
}
}
})
</script>
- el参数:DOM元素中的id
- date : 用于定义属性
- methods:用于定义函数
- {{}}:用于输出函数对象和属性值
- 当一个Vue对象被创建时,他向Vue的响应体系中加入了其data对象中能找到的所有属性,当这些属性发生改变时,html视图也会发生相应的改变。
1.3 模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1.4 插值
1.4.1 文本(最常见形式)
<p>{{message}}</p>
1.4.2 v-html指令
使用v-html指令用于输出html代码
<div v-html="message"></div>
1.4.3 v-bind指令
HTML属性中的值应使用v-bind指令
//use为true,使用class1的样式,否则不使用
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="use" id="r1"/>
<div v-bind:class="{'class1':use}">
v-bind:class指令
</div>
绑定data中的数据,冒号后面直接写参数
<a v-bind:href="url">菜鸟教程</a>
1.5 指令
指令用于在表达式的值改变时,将某些行为应用到DOM上
1.5.1 v-if指令
- 根据表达式的值来决定插不插入p元素
<div id="app">
<p v-if="flag">
emmm,不好的心情
</p>
<template v-if="judge">
<p>要学好多话</p>
<p>p标签带自动换行</p>
<span>span标签不带自动换行</span>
学的都快忘完了
</template>
</div>
var vue = new Vue({
el:"#app",
data:{
flag:true,
judge:true
}
})
Template(模板)相当于一个容器,可以放很多条语句
1.5.2 v-on指令
- 监听dom事件
- 修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
methods:{
good: function(){
this.sentence=this.sentence.split('').reverse().join('');
}
split(’ ‘);将句子分割成单个单词
join(’ ');把分割的字符串按照俩里面的分隔符进行拼接
1.5.3 缩写
- v-bind可以缩写为 :
- v-on可以缩写为 @
1.5.2 v-model指令
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
输入姓名:<input type="text" v-model="name"/>
data:{
name:"张三"
},
1.6 过滤器
Vue.js 允许自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
- 在两个大括号中
{{message|capitalzie}}- 在v-bind指令中
<div v-bind:id=“rawId | formatId”>
<div id="app">
{{message | captilize}}
</div>
message:"good idea",
filters:{
captilize: function(value){
return value.toUpperCase().split('').reverse().join('');
},
}
1.7 条件循环与判断语句
1.7.1 v-if
1.7.2 v-else
<div id="app">
<div v-if="3 > 4">
哈哈
</div>
<div v-else>
开心开心
</div>
</div>
结果:
开心开心
1.7.3 v-if-else-if
<div id="app">
<div v-if="flag === 'a'">
哈哈
</div>
<div v-else-if="flag === 'b'">
开心开心
</div>
<div v-else>
达拉大佬
</div>
</div>
1.7.4 v-show命令
v-show 指令来根据条件展示元素:
<h1 v-show="judge">
老奶奶
</h1>
judge:true
1.8 循环语句
v-for命令
- 遍历数组
<p v-for="arr in array">{{arr.name}}</p>
array:[
{name:"zhangsan"},
{name:"lisi"},
{name:"wangwu"}
]
<template></template>中可以遍历一段数据
- 遍历一个对象的属性
<p v-for="value in student">{{value}}</p>
student:{
name:"zhangsan",
age:"19",
address:"shanxi"
}
value依次指向对象中的每一个元素
- (value, key)遍历对象中各个属性
<p v-for="(value, key) in student">{{key}}:{{value}}</p>
结果:
name:zhangsan
age:19
address:shanxi
- 第三个参数为索引
参数的顺序和结果的顺序相反
<p v-for="(value, key,index) in student">{{index}}.{{key}}:{{value}}</p>
- 遍历整数
<p v-for="n in 10">{{n}}</p>
结果:
1
2
3
...
二、其他属性
2.1 计算属性computed
- 直接调用函数
<p>{{toUpper}}</p>
message:"good",
computed:{
toUpper: function(){
return this.message.toUpperCase();;
}
}
toUpper值依赖于message,message改变,toUpper值也改变
2.2 computed的get个set
computed有默认的get方法,但是没有默认的set方法,需要我们自定义,一旦调用了set方法,相关的值就会发生改变。
var vue = new Vue({
el:"#app",
data:{
name:"google"
},
computed:{
site:{
set:function (value) {
this.name = value;
},
get:function () {
return this.name
}
}
}
})
vue.site = "good1111";
document.write(vue.site);
2.3 computed和methods的区别
- 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
- 可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
- computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
2.3 监听属性
- 可以监听date中变量改变前的值和改变后的值
<div id="app">
<p>{{count}}</p>
<button v-on:click="count++" >按钮</button>
</div>
data:{
count:1
}
vue.$watch('count',function(nval,oval){
alert("旧值" + oval + "变为" + nval);
})
$watch写在new Vue({})外面
- 写成函数的形式,可以对data中的值进行操作
watch:{
kilo:function(val){
//val是text标签中的值,标签中如果写入新的数据,val就是这个新的数据
this.kilo = val;
this.meter = this.kilo * 1000;
},
meter:function(val){
this.meter = val;
this.kilo = val / 10;
}
千米:<input type="text" v-model="kilo">
米:<input type="text" v-model="meter" />
2.4 样式绑定
- 为v-bind:class设置一个对象,对象后面的值用来决定该标签里的内容是否显示
<div v-bind:class="{active: isactive}"></div>
.active{
height: 300px;
width: 300px;
background: #0000FF;
}
- 可以在v-bind后面多写几个class对象,不过要带’ '。
<div v-bind:class="{active: isactive, 'hello':flag}"></div>
- 可以将v-bind绑定的class属性的值写在data域里
<div v-bind:class="object"></div>
data:{
object:{
active:true,
hello:false
}
}
});
- 直接绑定样式对象
<div v-bind:style="varity">你好</div>
varity:{
fontSize:'20px',
color:'red'
}
2.5 事件处理
- click点击事件
用v-on指令将点击事件绑定到想要绑定的标签上
methods:{
method:function(){
this.oval = this.nval;
}
}
- event.target返回的是点击元素的节点,比如点击按钮,返回的是Button
- 用内联JS语句
<button v-on:click="say('你好')">你好</button>
methods:{
say:function(message){
alert(message);
}
2.6 表单
用v-model在表单控件元素上创建双向数据绑定
- 下拉菜单
<select v-model="province">
<option vlaue="请选择一个省">请选择一个省</option>
<option value="陕西省">陕西省</option>
<option value="河南省">河南省</option>
<option value="云南省">云南省</option>
</select>
<p>选择的省份为:<u>{{province}}</u></p>
province:"请选择一个省"
v-model在<select></select>标签里绑定
- 性别选择
<input type="radio" value="男" v-model="gender" name="sex" checked="checked">男
<input type="radio" value="女" v-model="gender" name="sex">女
<p>{{gender}}</p>
gender:"男"
- 复选框
<div id="app">
<input type="checkbox" value="游泳" checked="checked" v-model="hobby">游泳
<input type="checkbox" value="打篮球" v-model="hobby">打篮球
<input type="checkbox" value="踢足球" v-model="hobby">踢足球
</div>
hobby:["打篮球"]
复选框必须用[ ]来绑定,否则会全选所有值。
*日期标签
<div id="app">
<input type="date" v-model="date">日期
<p>{{date}}</p>
</div>
date:"2013-03-04"
三、组件相关
3.1 组件的概念
组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
3.2 注册及调用全局组件
注册组件:
Vue.component(tagName, options)
调用组件:
<tarName></tarName>
举例:
Vue.component('component', {template:'<h1>第一个组件</h1>'})
var vue = new Vue({
el:"#app",
});
<div id="app">
<component></component>
</div>
3.3 注册及调用局部组件
- 我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:
var com = {
template:'<h1>第二个组件</h1>'
}
var vue = new Vue({
el:"#app",
components:{
'component':com
}
});
<div id="app">
<component></component>
</div>
3.3 prop
prop是父组件用来传递数据的一个自定义属性,父组件的数据要通过prop把数据传给子组件,子组件需显示的用prop选项声明prop。
Vue.component('child',{
props:['message'],
template:'<span>{{message}}</span>'
})
var vue = new Vue({
el:"#app",
});
<div id="app">
<child message="hello!"></child>
</div>
3.4 动态prop
类似于用v-bind绑定HTML特性到每一个表达式,也可以用v-bind动态绑定props的值到父组件的数据中,当父组件的数据变化时,该变化也会传导到子组件。
<div id="app">
<input v-model="parentMsg"/>
<br>
<child v-bind:message="parentMsg"></child>
</div>
Vue.component('child',{
props:['message'],
template:'<span>{{message}}</span>'
})
var vue = new Vue({
el:"#app",
data:{
parentMsg:'父组件内容'
}
});
3.5 以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中:
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props:['todo'],
template:'<li>{{todo.text}}</li>'
})
new Vue({
el:"#app",
data:{
sites:[
{text:'runoob'},
{text:'Google'},
{text:'taobao'}
]
}
})
todo与item绑定,item是sites中的遍历到的每一个元素,组件的内容是取出item.text的内容并作以展示。
3.6 自定义事件
子组件要把数据传递回去,就需要使用自定义事件!
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>{{total}}</p>
<child v-on:increment="totalValue"></child>
<child v-on:increment="totalValue"></child>
</div>
</body>
</html>
<script>
//创建一个全局组件,该组件的功能是创建一个按钮,点击一次,count加1.
Vue.component('child', {
template:
'<button v-on:click="addValue">{{count}}</button>',
data:function(){
return {
count:0
}
},
methods:{
addValue:function(){
this.count += 1
this.$emit('increment')
}
},
}
)
var vue = new Vue({
el:"#app",
data:{
total:0
},
methods:{
totalValue:function(){
this.total += 1
}
}
})
</script>
在子组件中,使用$emit(“xx”)和v-on:xx=“xxx”,把子组件的事件和父组件关联起来,子组件的事件一触发,紧接着父组件的事件也跟着触发。
3.7 自定义事件中的data对象必须是一个函数
data对象是一个函数,组件之间不相互影响,data对象是一个对象,会影响到其他组件
data对象是函数
data:function(){
return {
count:0
}
}
data对象是对象
var value= {
count : 0
}
data:function(){
return value}
四、vue路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
五、vue.js Ajax
5.1 vue-resource
Vue 要实现异步加载需要使用到 vue-resource 库。
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
5.2 get请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<title></title>
</head>
<body>
<div id="box">
<input type="button" @click="get()" value="点我异步获取数据(Get)">
</div>
</body>
</html>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'hello world',
},
methods:{
get:function(){
//发送get请求a
this.$http.get('a.txt').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>
5.3 post请求
参考文档:https://www.runoob.com/vue2/vuejs-ajax.html
都是上面的内容,直接参考这个地址!!!