VUE
jQuery类库 选择器
前端框架
vue是一款渐进式的JavaScript框架,用动态构建用户界面。
- 遵循MVVM模式
- 编码简洁、体积小、运行效率高,适合移动端/PC端的开发
- 本身只关注UI,可以轻松引入vue插件或者其他第三库开发项目
- 国内大规模使用、生态系统完善
作者:尤雨溪,曾就职Google
WebStorm开发提示:
MVVM模式:
model:模型
viewModel:中间连接的桥梁
View:视图
双向数据绑定:现在这个不能跟用户交互,都是直接展示的,也就是说,模型(Model)的内容发生变化,会直接更新到视图中。同理,视图这边(比如说用户输入东西或者其他)发生变化,也是同步到模型这边。
{{ }}语法说明:
- {{ }}可以插入文本,上面的案例就是;
- {{ }}中可以插入JavaScript表达式;
- {{ number + 1 }}
- {{ ok ? 'YES' : 'NO' }}
- {{ message.split(' ').reverse( ).join(' ') }} //把一个消息空格分隔,然后反转(倒着输出)
- {{ }}中只支持表达式,不支持其它语句
- <!-- 这是语句,不是表达式 -->
- {{ var a = 1 }}
- <!-- 流控制也不会生效,请使用三元表达式 -->
- {{ if (ok) { return message } }}
{{ }}表示可以在里面插入内容
v-test:
用于渲染普通文本,替换标签全部内容。
{{}}会替换出现插值表达式的位置
v-text和{{}}表达式渲染数据,不解析标签。
v-html:
如果你想输出真正的 HTML,你需要使用v-html指令,v-text仅渲染标签,不能解析 HTML 代码。
替换标签全部内容
v-html可以识别字符串中的标签
v-html不仅可以渲染数据,而且可以解析标签。
注意:动态渲染的HTML容易导致XSS攻击,只对可信内容使用v-html插值,绝对不要对用户提供的内容使用插值,不推荐使用v-html
v-bind:
- {{ }}、v-text、v-html语法不能作用在HTML标签的属性上;
- v-bind指令可以用于响应式的更新HTML标签的属性
<div title="{{message}}"></div>是无法使用的,后台会报错,要使用v-bind
这种标签属性的话用法:
<body>
<div id="app">
<a v-bind:href="url">{{content}}</a>
<!-- disabled是按钮是否可使用 -->
<button v-bind:disabled="disabled">按钮</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
url: 'http://www.baidu.com',
content: '百度',
disabled: true
}
})
</sript>
如果isButtonDisabled的值是null、undefined或false,则disabled attribute甚至不会被包括在渲染出来的<buttion>元素中。
缩写:
<!-- 缩写 -->
<a href="url">{{content}}</a>
<button :disabled="disabled">按钮</button>
可以直接使用:不用写v-bind
v-on:
绑定事件
<body>
<div id="app">
点击次数:{{count}}
<button v-on"click="count+=1">点击</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
count: 0
}
})
</script>
点击增加一次
缩写:
<body>
<div id="app">
<!-- <button v-on:click="count+=1">点击</button> -->
<!-- 编写 -->
<button @click="count+=1">点击</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
count: 0
}
})
console.log(vm.$data.count)
</script>
js部分可以同上张图不改变,直接在@click中只能书写这些简单的,复杂的方法只能在methods中去定义
methods中定义方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
点击次数:{{count}}
<!-- <button v-on:click="count += 1">点击</button> -->
<!-- 缩写 -->
<!-- <button @click="count += 1">点击</button> -->
<button @click="funCount" :disabled="disabled">点击</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
count: 0,
disabled: false,
message: ''
},
methods: { //methods中可以定义方法
funCount : function(){
//this.count ++;//同样的作用,也是+1
//如果点击到10之后,按钮禁用
if(this.count == 10){
this.disabled = true
}else{
this.count += 1;
}
}
}
})
//console.log(vm.$data.count)
</script>
</html>
funCount不能写做funCount(),funCount是(是事件:是放什么的时候才调用这个函数)在这只是声明一下,点的时候才调用这个函数
funCount()是调用函数
内联处理器中的方法:
除了直接绑定一个方法,也可以在内联JavaScript语句中调用方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
点击次数:{{count}}
<!-- <button v-on:click="count += 1">点击</button> -->
<!-- 缩写 -->
<!-- <button @click="count += 1">点击</button> -->
<!-- <button @click="funCount" :disabled="disabled">点击</button>-->
<button @click="say('jack')">sayHi</button>
{{message}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
count: 0,
disabled: false,
message: ''
},
methods: { //methods中可以定义方法
funCount : function(){
//this.count ++;//同样的作用,也是+1
//如果点击到10之后,按钮禁用
if(this.count == 10){
this.disabled = true
}else{
this.count += 1;
}
},
say: function (name){
this.message = 'hello' + name;
}
}
})
//console.log(vm.$data.count)
</script>
</html>
事件冒泡和捕获:
点击div时只会弹出div,而点击button时会先弹出button然后再弹出div,这个就称为事件的冒泡(就是button在div容器中的,点击button时会把他父容器的事件都集连着出发,从里往外触发)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Vue</title>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
}
button {
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div>
<button>按钮</button>
</div>
<script>
// 点击div时只会弹出div,而点击button时会先弹出button然后再弹出div,这个就称为事件的冒泡
// 就是button在div容器中的,点击button时会把他父容器的事件都集连着出发,从里往外触发
// querySelector是原生的jQuery提供的选择器,这里面也支持标签选择器
// addEventListener添加一个方法
// document.querySelector('div').addEventListener('click',function (){
// alert('div');
// });
// document.querySelector('button').addEventListener('click',function (){
// alert('button');
// });
//在原生js绑定中,后面时有一个参数(false位置),有冒泡和捕获
//默认为冒泡:false,先触发子容器事件再触发父容器的事件
// document.querySelector('div').addEventListener('click',function (){
// alert('div');
// },false);
//
// document.querySelector('button').addEventListener('click',function (){
// alert('button');
// },false);
//捕获:先触发父容器的事件,再触发子容器的事件
//true为捕获
document.querySelector('div').addEventListener('click',function (){
alert('div');
},true);
document.querySelector('button').addEventListener('click',function (){
alert('button');
},true);
</script>
</body>
</html>
事件修饰符:
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。为了解决这个问题,Vue.js为 v-on 提供了事件修饰符。修饰符是由开头的指令后缀来表示的。
- .stop
- .prevent
- .capture
- .self
- .once
.prevent 阻止事件的默认行为
.stop 阻止事件冒泡
,stop.prevent 阻止默认行为和冒泡
.self 阻止子元素的事件冒泡(使用于父元素上)
.capture 事件的捕获(使用于父元素上)
.once 事件只被触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Vue</title>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
}
button {
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 默认为事件冒泡 -->
<div @click="funDiv">
<button @click="funButton">按钮</button>
<a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
</div>
<!-- .stop 阻止事件的冒泡 -->
<div @click="funDiv">
<button @click.stop="funButton">按钮</button>
<a href="http://www.baidu.com" @click.prevent.stop="funHref">百度</a>
</div>
<hr>
<!-- .self 阻止子元素的冒泡 -->
<div @click.self="funDiv">
<button @click="funButton">按钮</button>
<a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
</div>
<hr>
<!-- .capture 事件的捕获(使用于父元素上) -->
<div @click.capture="funDiv">
<button @click="funButton">按钮</button>
<a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
funDiv: function (){
alert('div')
},
funButton: function (){
alert('button')
},
funHref: function (){
alert('href')
}
}
})
</script>
</body>
</html>
.preven 阻止元素的默认
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!--原生js写法-->
<!--<a href="Javascript:void(0)" @click="fun">百度</a>-->
<!--vue的方法-->
<!-- .preven 阻止元素的默认事件 -->
<a href="https://www.baidu.com" @click.prevent="fun">百度</a>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
fun: function (){
alert('aaa')
}
}
})
</script>
</html>
事件
.once 表示这个事件只触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!--原生js写法-->
<!--<a href="Javascript:void(0)" @click="fun">百度</a>-->
<!--vue的方法-->
<!-- .preven 阻止元素的默认事件 -->
<!-- .once 表示这个事件只触发一次 -->
<a href="https://www.baidu.com" @click.prevent.once="fun">百度</a>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
fun: function (){
alert('请扫描二维码!')
}
}
})
</script>
</html>
.self 表示阻止子元素的事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Vue</title>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
}
button {
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- .self 阻止子元素的冒泡 -->
<div @click.self="funDiv">
<button @click="funButton">按钮</button>
<a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
funDiv: function (){
alert('div')
},
funButton: function (){
alert('button')
},
funHref: function (){
alert('href')
}
}
})
</script>
</body>
</html>
.capture表示事件的捕获事件(作用于父元素上)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Vue</title>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
}
button {
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- .capture 事件的捕获(使用于父元素上) -->
<div @click.capture="funDiv">
<button @click="funButton">按钮</button>
<a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
funDiv: function (){
alert('div')
},
funButton: function (){
alert('button')
},
funHref: function (){
alert('href')
}
}
})
</script>
</body>
</html>