vue--学习（一）
一、vue介绍
除了这些前端框架
- javascript
- html
- css
- jquery
- ajax
- BootStrap
- vue
- agural js
vue是一个渐进式的js框架，只关注视图层，视图和数据是分离的。
1.vue的快速开始
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>快速开始</title>
</head>
<body>
<div id="app">
<!--通过差值表达式来获取vue对象中提供的数据-->
欢迎你！{{name}}!年龄是：{{age}}
</div>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{ //提供数据
name:'小明',
age:20
}
})
</script>
</body>
</html>
2.cdn内容分发
网络
3.vue中的MVVM双向数据绑定模式
二、Vue中的关键字
1. v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体验MVVM</title>
</head>
<body>
<div id="app">
{{name}}<br/>
<input type="text" v-model="name"/>
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{ //提供数据
name:'小明',
age:20
}
})
</script>
</html>
将html标签的value属性值与vue对象中的属性值进行绑定，实现双向数据绑定的效果
2.v-on
在html标签上绑定事件，与普通绑定事件的不同之处在于v-on绑定的事件发生后的响应行为是vue对象中定义的方法。“v-on:“ 可以被 “@”替代
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on</title>
</head>
<body>
<div id="app">
{{name}}<br/>
<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/>
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{ //提供数据
name:'小明',
age:20
},
methods:{
sayHi:function(){
alert("hello!!!");
},
changeName:function(){
console.log(this.name);
}
}
})
</script>
</html>
3.v-bind
当html标签内的属性值需要使用vue中的属性值，就不能使用差值表达式来获取了，因为差值表达式只能写在视图层的html标签外。因此，需要通过v-bind关键字来实现。“v-bind:”可以被简写成":"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind</title>
</head>
<body>
<div id="app">
{{name}}<br/>
<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/><br/>
<a v-bind:href="link">baidu</a><br/> <!--使用v-bind获取vue中对象的属性值-->
<a :href="link">baidu</a><!--v-bind简写-->
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{ //提供数据
name:'小明',
age:20,
link:"http://www.baidu.com"
},
methods:{
sayHi:function(){
alert("hello!!!");
},
changeName:function(){
console.log(this.name);
}
}
})
</script>
</html>
4. v-once
当前的值出现后就不会再更改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-once</title>
</head>
<body>
<div id="app">
{{name}}<br/>
<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/><br/>
<a v-bind:href="link">baidu</a><br/>
<a :href="link">baidu</a><br/>
<p v-once>{{name}}</p>
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{ //提供数据
name:'小明',
age:20,
link:"http://www.baidu.com"
},
methods:{
sayHi:function(){
alert("hello!!!");
},
changeName:function(){
console.log(this.name);
}
}
})
</script>
</html>
5.v-html 和 v-text
v-html会把文本显示成html标签，而v-text只会按照文本来显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html & v-text</title>
</head>
<body>
<div id="app">
{{name}}<br/>
<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/><br/>
<a v-bind:href="link">baidu</a><br/>
<a :href="link">baidu</a><br/>
<p v-once>{{name}}</p><br/>
<p v-html="finishedlink"></p><br/>
<p v-text="finishedlink"></p><br/>
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{ //提供数据
name:'小明',
age:20,
link:"http://www.baidu.com",
finishedlink:"<a href='http://www.baidu.com'>百度</a>"
},
methods:{
sayHi:function(){
alert("hello!!!");
},
changeName:function(){
console.log(this.name);
}
}
})
</script>
</html>
三、vue中的事件
1.事件的三大部分
- 事件的触发条件的设置
- 事件的参数传递
- 事件的响应行为
2.vue中的事件绑定、传参、响应行为的例子
- 案例一： 通过button点击，传递参数给increase，增加count的值
- 案例二：给p标签设置鼠标移动的事件监听，响应行为是获取当前鼠标的x和y轴坐标，赋值给x和y
- 案例三：在p标签内部创建span，用来阻止事件冒泡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中的事件</title>
</head>
<body>
<div id="app">
{{count}}
<button type="button" v-on:click="increase(2)">click</button>
<p v-on:mousemove="mo">
mx:{{x}}<br/>
my:{{y}}<br/>
<span v-on:mousemove="dummy">停止鼠标移动</span>
</p>
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{
count:0,
x:0, //当前鼠标x轴的坐标
y:0 //当前鼠标y轴的坐标
},
methods:{
increase:function(step){
this.count+=step;
},
mo:function(event){//event 内置参数
this.x = event.clientX;
this.y = event.clientY;
},
dummy:function(event){
event.stopPropagation();//调用event内置方法停止
}
}
})
</script>
</html>
3.事件修饰符
可以通过事件修饰符来修饰某个事件的具体的行为。
比如在这个例子中，对键盘弹起的事件明确修饰的是enter键的弹起。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件修饰符</title>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.enter="submit" />
</div>
</body>
<!--引入外部的vue.js文件，页面就可以使用vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--使用js来创建vue对象，提供数据-->
<script>
new Vue({
el:'#app', //绑定页面上id是app的元素
data:{
},
methods:{
submit:function(){
alert("完成注册！");
}
}
})
</script>
</html>
浙公网安备 33010602011771号