vue
| 传统开发模式 | 现代开发模式 |
|---|---|
| jQuery | vue/react |
| 80%的精力放在表现层 | 20%的精力放在表现层 |
| 前端渲染 | 后台渲染 |
|---|---|
| 降低服务器负担、带宽压力小、用户体验好 | SEO、兼容、安全性 |
vue的核心是数据
- {{}}
<body>
<div id="div1">
{{name}}
{{age}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#div1',
data: {
age: 18,
name: 'zhangsan'
}
})
</script>
</body>
{{}}双括号里面的内容vue会到data里面去找。但是缺点是页面加载延迟的时候会出现{{name}}的状态
./1.php
<?php
sleep(3)
?>
sleep(3)
./index.html
<body>
<div id="div1">
{{name}}
{{age}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#div1',
data: {
age: 18,
name: 'zhangsan'
}
})
</script>
</body>
扔到服务器去访问
三秒前
image.png
三秒后
image.png
v-clock
<style>
*[v-clock] {display: none}
</style>
指令
补充了html的属性
v-bind
v-bind:绑定数据，用于任何属性
<div id="div1">
<p v-bind:title="age">{{name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#div1',
data: {
age: 18,
name: 'zhangsan'
}
})
</script>
image.png
v-bind:xxx
:xxx(缩写)
<p :title="age">{{name}}</p>
两个属性有另外的写法
(1)class="aa bb"
.aa {
width: 200px;
height: 200px
}
.bb {
background-color: red
}
<div id="div1">
<div :class="class_str">1</div>
<hr>
<div :class="class_arr">2</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#div1',
data: {
class_str: 'aa bb',
class_arr: ['aa', 'bb']
}
})
</script>
image.png
(2)style="width: 200px;backgound-color: red"
<div id="div1">
<p :style="style_str">{{content}}</p>
<strong :style='style_json'>{{content}}</strong>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#div1',
data: {
content: '我是中国人',
style_str: 'color: red; fontSize: 40px',
style_json: {color:'green',fontSize:'20px'}
}
})
</script>
image.png
v-mode
双向绑定
<div id='div1'>
<input v-model="name" type='text'/>
<p>{{name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#div1',
data: {
name: 'lwp'
}
})
image.png
你输入啥就立马显示啥
事件
v-on:click=""||@click=""
<body>
<div id="div1">
<input type="button" @click="fn()">
</div>
</body>
<script>
let vm = new Vue({
el: '#div1',
methods: {
fn() {
alert('1')
}
}
});
</script>
事件修饰符
事件冒泡
<body>
<div id="div1" @click="father()">
<input type="button" @click="son()">
</div>
</body>
<script>
let vm = new Vue({
el: '#div1',
methods: {
father() {
alert('father')
},
son() {
alert('son')
}
}
});
</script>
.stop阻止事件冒泡
<body>
<div id="div1" @click="father()">
<input type="button" @click.stop="son()">
</div>
</body>
<script>
let vm = new Vue({
el: '#div1',
methods: {
father() {
alert('father')
},
son() {
alert('son')
}
}
});
</script>
| 修饰符 | 作用 |
|---|---|
| prevent | 阻止默认事件 |
| stop | 阻止事件冒泡 |
| native | 原生（配合组件使用） |
| keycode|name | 按键 |
| once | 只会一次操作，后面就失效了 |
| self | 只认自己 |
| capture | 捕获阶段的事件 |
key:连着用,多个按键同时按才触发
.ctrl.enter
computed
<body>
<div id="div1">
{{num1}}+{{num2}}={{num3}}
</div>
</body>
<script>
let vm = new Vue({
el: '#div1',
data: {
num1: 1,
num2: 1,
},
computed: {
num3() {
return this.num1 + this.num2
},
}
});
</script>
这个功能用methods也能实现
但是computed有好处
1、缓存（跟methods每次计算不一样，只有数据变才会重新计算）->性能高
2、方便：既能读又能写
既能读又能写
<body>
<div id="div1">
<input type="text" v-model="familyName">
<input type="text" v-model="givenName">
<input type="text" v-model="name">
</div>
</body>
<script>
let vm = new Vue({
el: '#div1',
data: {
familyName: '张',
givenName: '三',
},
computed: {
name: {
get() {
return this.familyName + this.givenName
},
set(value) {
this.familyName = value[0];
this.givenName = value.substring(1)
}
},
}
});
</script>
image.png
既能从前到后
image.png
也能从后到前
image.png
高亮表示输入
监听
<body>
<div id="div1">
<input type="text" v-model="name">
</div>
</body>
<script>
let vm = new Vue({
el: '#div1',
data: {
name: 'lwp'
},
watch: {
name() {
console.log('name change')
}
}
});
</script>
网友评论