目录
Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
一.导入
概述:Vue是一个类似于Jquery的一个JS框架,所以,如果想使用Vue,则在当前页面导入Vue.js文件即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
二.插值表达式
<div id="app">
<!--插值表达式:{{}}-->
{{content}}
{{age}}
{{1+2}}
{{[1,2,3,4][2]}}
{{{"name":"千玺","age":20}.age}}
</div>
<script>
//vue对象 所有关于页面的操作 都要基于vue对象内部去搞
new Vue({
el:"#app",//作用在谁身上 只在范围内生效
data:{
title:"我是vue",
content:"内容",
age:18
}
});
</script>
结果:
三.数据双向绑定数据(v-model)
1.双向绑定
<!--双向-->
{{title}}
<input type="text" v-model="title ">
<script>
new Vue({
el:"#app",
data:{
title:"我是vue"
}
});
</script>
当值发生改变时两边数据都会发生改变,效果如下:
2.单项绑定
一方发生改变另外一方不会有任何变化
<!--单向-->
{{title}}
<input type="text" :value="title ">
<script>
new Vue({
el:"#app",
data:{
title:"我是vue"
}
});
</script>
四.事件绑定
Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on
<button @click="test2()">点我弹框</button>
<script>
new Vue({
el:"#app",
data:{
title:"我是vue",
content:"内容",
age:18,
url:"http://www.baidu.com",
num:0,
color:"red"
},
//定义vue的方法
methods:{
test2:function () {
alert("!!!!")
}
}
});
</script>
结果:
五.绑定属性
属性前加上“:”即可
<a :href="url">点点点</a>
<script>
new Vue({
el:"#app",
data:{
url:"http://www.baidu.com"
}
});
</script>
计数器案例:
<button @click="jia()">点我加加</button>
<h3 v-html="num"></h3>
<script>
new Vue({
el:"#app",
data:{
num:0
},
methods:{
jia:function () {
this.num++;
}
}
});
</script>
</html>
结果:
点击后:
六.Vue组件
组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-first></my-first><!--自定义组件-->
</div>
<div id="app2">
<my-two></my-two>
</div>
</body>
<script>
//1.new Vue 2.注册一个组件
var my={
//注册一个组件data的声明只能用return的形式
//在第二种方式中 data不再是一个属性 而是一个方法
data(){
return {
str: "阿西吧"
}
},
//定义组件长什么样子 定义组件的模版
template:"<h1>我是my-first的h1<span>{{str}}</span><button @click='test'>点我</button></h1>",
methods: {
test:function () {
alert("我是组件中的test方法")
this.str="嘻嘻嘻"
}
}
};
new Vue({
el:"#app",
components:{
"my-first":my
}
})
new Vue({
el:"#app2",
components:{
"my-two":my
}
})
</script>
</html>
注意:
- 组件的模版中, 只能书写一个跟标签
- 组件的定义必须放在Vue创建对象之前, 否则报错
结果:
点击后:
MVVM 第三者 监视者 监视者能够观察到双方数据的变化,并对视图对应的内容进行更新 监视者能够监听到双方数据的变化,并能够通过脚本层中的数据发生变更 vue.js只是一个MVVM模型的最佳实现者之一 vue可以随便使用js代码 js\html不可以随意调用vue内容 为什么vue这么优秀 1.体积小 vue.jsp压缩之后的大小只有20k 2.移动优先级高,更适合移动端 3.易上手 4.开源