vue.js学习
插值
就是通过{{}} 插入实例对象对象中 data 的属性值 ,支持表达式(加减乘除等有结果的),尽搞那么专业的词汇
指令
v-text:会替换标签整个内容,{{}}插值方式只替换被扩起的部分,不会解析html内容
v-html:可以渲染html,尽量避免使用,可能会引起xss攻击
v-bind:用来绑定标签上的任何属性,简化语法是:前面的v-bind不用写直接用:
1.动态绑定图片路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text|v-html</title>
</head>
<body>
<div id="app">
<img v-bind:src="src">
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
src: './postman.png'
}
});
</script>
</html>2.绑定a标签上的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text|v-html</title>
</head>
<body>
<div id="app">
<img v-bind:src="src">
<a v-bind:href="'del.php?id='+id">删除</a>
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
src: './postman.png',
id:11,
}
});
</script>
</html>3.绑定class(有两种语法,对象语法,和数组语法)
对象语法:
如果isActive为true，则返回的结果为 <div id="app" class="active"></div>
<div id="app" v-bind:class="{active: isActive}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>数组语法
渲染结果： <div id="app" class="active text-danger"></div>
<div id="app" v-bind:class="[activeClass, dangerClass]">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
dangerClass: 'text-danger'
}
});
</script>4.绑定style(有两种语法,对象语法,和数组语法)
对象语法
渲染的结果： <div id="app" style="color: red; font-size: 40px;">hei</div>
<div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
redColor: 'red',
font: 40
}
});
</script>数组语法
渲染结果：<div id="app" style="color: red; font-size: 18px;">abc</div>
<div id="app" v-bind:style="[color, fontSize]">abc</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: {
color: 'red'
},
fontSize: {
'font-size': '18px'
}
}
});
</script>简化语法:
<div id="app">
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
</div>v-model:同v-bind一样都是绑定数据,只不过这个是双向绑定,不管 DOM 元素还是 vue 对象，数据的改变都会影响到另一个；
修饰符:
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
v-on:绑定事件监听
简写方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="ids" @click="fun">按钮</button>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el:'#ids',
data:{
},
methods:{
fun:function () {
console.log(11);
}
}
});
</script>
</html>用修饰符 阻止浏览器的默认行为
<div id="app">
<a href="http://www.qq.com" @click.prevent="cli">腾百万</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
</script>使用修饰符绑定一次性事件
<div id="app">
<a href="http://www.qq.com" @click.once="cli($event)">腾百万</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function (ev) {
ev.preventDefault();
alert('123');
}
}
});
</script>按键修饰符
绑定键盘抬起事件，但是只有enter 键能触发此事件
<div id="app">
<input type="text" @keyup.enter="keyup">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
keyup:()=>{
console.log('111')
}
}
});
</script>系统修饰符
按住 shift 后才能触发点击事件
<div id="app">
<input type="button" value="按钮" @click.shift="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
</script>鼠标修饰符
鼠标中键触发事件
<div id="app">
<input type="button" value="按钮" @click.middle="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
</script>为什么在 HTML 中监听事件?
这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。
它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
v-show:显示和隐藏元素(实际上是通过css样式display:none来控制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app" v-show="is_show">111</div>
<script>
var app = new Vue({
el:'#app',
data:{
is_show:true//false 为隐藏
}
});
</script>
</body>
</html>v-if / v-else / v-else-if 条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else="type == 'C'">C</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
type:'a'
}
});
</script>
</body>
</html>v-for:比如经常给一个li循环展示数据,支持数组和对象
<div id="app">
<ul>
<li v-for="(val,key) in arr">{{val}}---{{key}}</li>
</ul>
<ul>
<li v-for="(val,key) in obj">{{val}}---{{key}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: { id: 1, name: '李四' }
},
})
</script>v-clock:解决vue还没被加载之前会出现花括号的方法,平时基本用不上的
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<p v-cloak>{{obj.id}}</p>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
obj: { id: 1, name: '李四' }
},
})
}, 2000);
</script>v-once:数据绑定一次
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'kkk'
},
})
</script>
上一篇： Vue实战4-与后端数据交互
下一篇： Vue.js 快速入门