目录
1.Vue介绍
Vue 官网:https://cn.vuejs.org/
渐进式JavaScript框架
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.Vue入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<button type="button" @click="show()">一个按钮</button>
<!-- {{}} 这语法是vue 提供的 -->
<h1>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
var obj = {
//vue控制的区域
el: '#box',
//vue管理的数据,现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。数据一变化,视图会自动刷新
data: {
msg: 'Hello Vue'
},
methods: {
show: function() {
alert("呵呵")
}
}
}
var app = new Vue(obj);
/* 注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #box) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。 */
</script>
</html>
3.模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1>{{msg}}</h1>
<!-- {{}} 支持运算符 -->
<h1>{{num+100>100}}</h1>
<!-- {{}} 支持三元运算符 -->
<h1>{{flag==true?'等于':'不等于'}}</h1>
<!-- {{}} 支持调用js的方法,这个方法要有返回值 -->
<h1>{{str.toUpperCase().split('').reverse().join("")}}</h1>
<!-- 但是,我们一般情况,不在{{}} 里做逻辑运算,以及调用 方法,我我们大多数情况下,只是把数据展示出来 -->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'Hello',
num:66,
flag:true,
str:'hello'
}
})
</script>
</html>
4.v-text和v-html指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 指令:就是vue提供的一个行间属性,可以把一些行为,应用到这个元素上,vue提供的行间指令都是以v-开头,你要做的就是记住这个指令,是干啥的
你会发现,我们使用vue基本上,不用我们去操作DOM 我们只关心数据和视图,数据一变化,视图就会自动更新。
视图变化也会引起数据的变化。
-->
<h1>{{msg}}</h1>
<h1 v-text="str"></h1>
<h1 v-text="username"></h1>
<!-- 会转义html标签 -->
<h1 v-html="username"></h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
str:'hehe',
username:"<u style='color:red'>张三</u>"
}
})
</script>
</html>
5.v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<img src="img/u11251389372721875248fm26gp0.jpg" >
<a href="https://www.163.com">进入网易</a>
<!-- v-bind 可以绑定标签自带的属性,标签属性属性的值,可以交由vue管理 -->
<img v-bind:src="imgUrl" @click="changeImage()">
<a v-bind:href="url">进入网易</a>
<!-- v-bind 指令可以简写 :-->
<img :src="imgUrl" >
<a :href="url">进入网易</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
imgUrl:'img/u11251389372721875248fm26gp0.jpg',
url:'https://www.163.com'
},
methods:{
/* changeImage:function(){
} */
//es6 新语法
changeImage(){
//this 代表的是vue实例
this.imgUrl="img/a.jpg"
}
}
})
</script>
</html>
6.事件的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- v-on:事件名=处理函数 -->
<button type="button" v-on:click="show()">一个按钮</button>
<button type="button" v-on:click="test(100,msg)">一个按钮2</button>
<!-- v-on指令可以简写 @事件名=处理函数 -->
<button type="button" @click="suibian()">一个按钮3333</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
//vue所管理的函数
methods:{
show:function(){
alert("hello");
},
//es6新语法
test(num,m){
alert("hehe"+num+m);
},
suibian(){
alert(this.msg);
}
}
})
</script>
</html>
7.表单数据的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<input type="text" name="" id="" value="hello" />
<input type="text" name="" id="" :value="msg" />
<br>
<!-- 对于 表单项的数据绑定,我们采用v-model 这个指令来绑定数据 -->
<!-- 视图和数据的双向绑定,数据变化,视图自动变化,视图变化也会引起数据的变化。 -->
<input type="text" name="" id="" value="" v-model="str" />
<h1>{{str}}</h1>
<input type="text" name="" id="" value="" v-model="str" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
str:'HaHa'
}
})
</script>
</html>
8.v-clock指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1 v-cloak>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
//alert("abc")
new Vue({
el: '#box',
data: {
msg: 'hello'
}
})
</script>
</html>
9.v-pre指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- v-pre 不解析模板语法,保持原有的内容 -->
<h1 v-pre>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
}
})
</script>
</html>
10.图片的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<img v-bind:src="imgUrl" >
<button type="button" @click="kaiguan2(flag=!flag)">开关</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
imgUrl:'img/pic_bulboff.gif',
flag:false
},
methods:{
kaiguan(){
//this 代表的是vue实例
if(this.flag){
this.imgUrl="img/pic_bulbon.gif"
}else{
this.imgUrl="img/pic_bulboff.gif"
}
//修改标记
this.flag=!this.flag;
},
kaiguan2(f){
if(f){
this.imgUrl="img/pic_bulbon.gif"
}else{
this.imgUrl="img/pic_bulboff.gif"
}
}
}
})
</script>
</html>
11.反转字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 我们觉得你{{}} 模板里面调用方法,阅读性不好,如果说逻辑再复杂写,还写不出来了-->
<h1>{{msg.split('').reverse().join('')}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
}
})
</script>
</html>
12.计算属性最基础的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 我觉得{{}} 模板里面调用方法,阅读性不好,如果说逻辑再复杂写,还写不出来了-->
<h1>{{msg.split('').reverse().join('')}}</h1>
<h1>{{reverseMsg}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
//计算算属性
computed:{
//reverseMsg这个属性的值,是通过对msg这个属性进行逻辑操作得来的
reverseMsg:function(){
//反转 msg 返回
var text=this.msg.split('').reverse().join('');
return text;
}
}
})
</script>
</html>
13.计算属性的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
你的姓: <input type="text" name="" id="" value="" v-model="xing" />
<br>
你的名:<input type="text" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名:<input type="text" name="" id="" value="" v-model="xing.concat(' ').concat(ming)" /> -->
全名:<input type="text" name="" id="" value="" v-model="fullname" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
xing:'',
ming:'',
},
computed:{
fullname:function(){
//第一次初始化会调用一次
//计算属性从语法概念上来说不难,难的是你在做需求时,你想不起来要用这个计算属性这个概念
console.log("fullname第一次初始化会调用一次")
console.log("你使用的其他属性比如xing和ming的值一变化fullname就会调用")
return this.xing.concat(' ').concat(this.ming)
}
}
})
</script>
</html>