vue的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><!-- 声明式渲染 -->{{message}}<!-- 声明式渲染可以进行简单的运算 -->{{flag?'真':'假'}}<!-- 简单的四则运算 -->{{num*3}}</div><script>var app = new Vue ({el:"#app", // el element 元素 元素挂载点data:{// 初始化数据message:"hello word",flag:false,num:8}})</script>
</body>
</html>
指令的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app">{{money}}<!-- 指令 (Directives) 是带有 v- 前缀的特殊 attribute --><div>{{lunch}}</div><div v-text="lunch"></div><div v-html="content"></div><div>{{content}}</div><div v-text="content"></div><div v-html="richText"></div></div><script>// doucument.getElementById("app").innerText = '00'var app = new Vue({el:"#app",data:{money:"2000",lunch:"米饭",content:"<h1>我是h1</h1>"}})</script>
</body>
</html>
其他指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><!-- 防止闪烁出现 --><h1 v-cloak>{{message}}</h1><!-- 跳过编译过程 --><p v-pre>{{message}}</p><!-- 只渲染元素和组件一次 即使后面数据进行更新了他也不会再次渲染了 --><div v-once>{{money}}</div></div><script>var app = new Vue ({el:"#app",data:{message:"hello word",money:200}})</script>
</body>
</html>
v-model的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><!-- 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定 --><!-- v-model的数据双向绑定 --><!-- 视图发生变化，数据也跟着变化 --><!-- 数据发生变化，视图也跟着变化 --><input type="text" v-model="username"><div>{{username}}</div></div><script>// 在表单控件或者组件上创建双向绑定let app = new Vue({el:"#app",data:{username:""}})</script>
</body>
</html>
v-model的简单应用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><p>姓名: <input type="text" v-model="username"></p><p>密码: <input type="text" v-model="password"></p><p>性别：<input type="radio" value="0" v-model="gender">男<input type="radio" value="1" v-model="gender">女</p><p>爱好:<input type="checkbox" value="1" v-model="hobby">喝咖啡<input type="checkbox" value="2" v-model="hobby">篮球<input type="checkbox" value="3" v-model="hobby">游泳</p><p>家庭地址:<select v-model="city" multiple><option value="c01">北京</option><option value="c02">上海</option><option value="c03">广东</option><option value="c04">深圳</option></select></p><p>备注:<textarea v-model.trim="desc"></textarea></p></div><script>let app = new Vue({el:"#app",data:{username:"",password:"",gender:"",hobby:[],city:[],desc:""}})</script>
</body>
</html>
事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><!-- 不简写形式 --><!-- <button v-on:click="shijiangming">小明</button> --><!-- 简写形式 v-on可以简写为@ --><!-- 当你不传递参数的加不加括号都一样 --><button @click="shijiangming">小明-one</button><button @click="shijiangming()">小明-two</button><!-- 如果你要传递参数必须加括号 --><button @click="changeMsg('aa','bb',$event)">点击事件带参数</button><button @click="changeName">怎么处理数据呢</button><div>{{name}}</div></div><script>var app = new Vue ({el:"#app", data:{name:"san"},// 在 `methods` 对象中定义方法methods:{shijiangming(e){console.log(e);},changeMsg(a,b,e){console.log('a',a);console.log('b',b);console.log('e',e);},changeName(){// this 指的是当前页面的vue实例化对象console.log('this',this.name);let that = this;that.name="小明"}}})</script>
</body>
</html>
事件修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script><style>.father {width: 500px;height: 300px;border: 1px solid red;}.son {width: 66px;height: 66px;background-color: aqua;}</style>
</head>
<body><div id="app"><!-- 阻止事件冒泡 --><div class="father" @click="fatherFun">father<!-- 阻止单击事件继续传播 --><div class="son" @click.stop="sonFun">son</div></div><!-- 阻止默认行为 --><a href="http://www.baidu.com" @click.prevent="preventFun">跳转到百度</a><!-- 事件捕获 --><div class="father" @click.capture="fatherFun">father<div class="son" @click.stop.capture="sonFun">son</div></div><!-- 修饰符可以串联 --><div class="father" @click="fatherFun">father<a href="http://www.baidu.com" @click.prevent.stop="preventFun">123</a><!-- self --><div class="father" @click.self="fatherFun">father<div class="son" @click="sonFun">son</div></div></div><script>let app = new Vue({el:"#app",data:{},// 方法定义写在methods属性中(methods属性值是一个对象)methods:{fatherFun(){console.log('父亲的方法');},sonFun(){console.log('儿子的方法');},preventFun(){console.log('点击了a标签并且阻止了默认行为');}}})</script>
</body>
</html>
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><input type="text" @keyup.enter.page-down.up.mmm="enterFun"></div><script>Vue.config.keyCodes.mmm = 66;let app = new Vue ({el:"#app",data:{},methods:{enterFun(){console.log('enter');}}})</script>
</body>
</html>
