<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识Vue</title>
<style>
/* v-cloak 将 {{}} 标记隐藏 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="root">
<h2>插值语法</h2>
<h3 v-cloak> hello, {{username}} </h3>
<h3>插值语法+过滤器（函数处理）</h3>
<p v-cloak>{{modelval|getType}}</p>
<p v-cloak>{{modelval|getType|slice(20)}}</p>
<h2>指令语法</h2>
<h3>单项数据绑定</h3>
<p><a target="_blank" :href="smallcode"> 轻代码 </a> <br> <a target="_blank" v-bind:href="workflow"> 工作流 </a></p>
<h3>双向项数据绑定</h3>
<p><input v-model:value="modelval"/></p>
<h3>计算属性</h3>
<p v-cloak>{{userinfo}}</p>
<p v-cloak>{{user_info}}</p>
<h2>调用点击事件</h2>
<button v-on:click="alertfunction">点击调用alert v-on</button>
<br>
<button @click="alertfunction">点击调用alert @简写</button>
<br>
<button @click="alertfunction(12)">点击调用alert 参数传递</button>
<br>
<button @click="alertfunction($event, 12)">点击调用alert 参数传递, 传递event</button>
<br>
<a v-on:click="alertfunction">点击调用alert a link 方式 </a>
<br>
<a href="http://smallcode.cn" @click.prevent="alertfunction">prevent 阻止默认事件，点击后只调函数，不做跳转</a>
<div @click="alertfunction"><br>
<a href="http://smallcode.cn" @click.stop.prevent="alertfunction"> stop 阻止事件冒泡，同时阻止默认的跳转事件</a><br>
</div>
<button @click.once="alertfunction($event, 12)"> once 事件只触发一次 , 多次点击无效 （类似于 v-once）</button>
<div @click.capture="showMsg(1)"><br>
<a @click="showMsg(2)"> capture 使用事件的捕获模式</a><br>
</div>
<div @click.self="alertfunction"><br>
<a @click="alertfunction"> self 只有event.target是当前元素时才触发。</a><br>
</div>
<h2>键盘事件</h2>
<input v-model:value="modelval" @keydown.enter="enterval"/>
<h2>动态修改样式</h2>
<div class="default_class" :class="custClass" @click="changeClassName">冒号class指向data 最终 class="default_class
cust_class"
</div>
<br>
<div :style="custStyle" @click="changeStyleContent">冒号style指向data</div>
<br>
<h2>条件显示/隐藏</h2>
<div v-show="1 === 1">
v-show 里的表达式 返回 true 则显示，返回false 则隐藏
</div>
<div v-show="visible">
v-show 里也可以是属性
相当于 display="none"
</div>
<div v-if="1 === 1">
v-if 里的表达式 返回 true 则显示，返回false 则隐藏
</div>
<div v-if="visible">
v-if 里也可以是属性
相当于 removeDom
</div>
<template v-if="visible">
<h4>template 不会被解析成dom</h4>
<h4>template 不能配合 v-show</h4>
<h4>template 可以配合 v-if</h4>
</template>
<h2>循环遍历</h2>
<ul>
数组遍历
<li>
索引 -- 用户ID -- 姓名 -- 年龄
</li>
<li v-cloak v-for="(user, index) in userList" :key="user.id">
{{index}} -- {{user.id}} -- {{user.name}} -- {{user.age}}
</li>
</ul>
<ul>
对象遍历
<li>
key -- value
</li>
<li v-cloak v-for="(value, key) in userDetail" :key="index">
{{key}} -- {{value}}
</li>
</ul>
<ul>
字符串遍历
<li>
index -- char
</li>
<li v-cloak v-for="(char, index) in smallcode" :key="index">
{{index}} -- {{char}}
</li>
</ul>
<ul>
空值遍历
<li>
index -- number
</li>
<li v-cloak v-for="(number, index) in 5" :key="index">
{{index}} -- {{number}}
</li>
</ul>
<h2>v-pre 不参与vue解析</h2>
<p v-pre>{{visible}} {{modelval}}</p>
</div>
<!-- 网速慢的时候，可以先加载上面的代码 ，元素加上 v-cloak 属性 可以不显示，加载结束之后再展示数据。-->
<!-- script src="js/vue.js"></script -->
// 阻止Vue在启动时生成生产提示；
Vue.config.productionTip = false;
// 对象设值
const vm = new Vue({
el: "#root",
// 数据属性
data: function () {
return {
// v-if v-show
visible: true,
custStyle: {
fontSize: "40px"
},
custClass: "cust_class",
username: "Colin",
smallcode: "http://www.smallcode.cn",
workflow: "http://www.workflow.net.cn",
modelval: "双向绑定的数据",
userList: [
{id: 1, name: "James", age: 58},
{id: 2, name: "Jack", age: 19},
{id: 3, name: "Glen", age: 34},
{id: 4, name: "Hank", age: 32},
{id: 5, name: "Lisa", age: 26}
],
userDetail: {id: 1, name: "James", age: 58, sex: 'male', address: "腻蒙古自治区李七庄子镇居委会外斜街484号院"}
};
},
// 计算属性
computed: {
// 完整写法
userinfo: {
get() {
return this.username.concat(" >> ").concat(this.modelval);
},
set(str) {
//...
}
},
// 简写
user_info: function () {
return this.username.concat(" 简写 >> ").concat(this.modelval);
}
},
// 方法
methods: {
changeStyleContent() {
this.custStyle = {fontSize: "60px"};
},
changeClassName() {
// 动态改变样式名称
this.custClass != "new_class" ? this.custClass = "new_class" : this.custClass = "cust_class";
},
alertfunction(a = "没传a", b = "没传b") {
console.info("弹出", a, b);
},
showMsg(m) {
console.info(m);
},
enterval(e) {
console.info(e);
}
},
// 监视
watch: {
// 被监视的属性对象
modelval: {
deep: false, //复杂对象中的属性用深度监听设置为 true，默认false
handler(newValue, oldValue = "第一次没有") {
console.info("监测 modelval 的变更", newValue, oldValue);
}
}
},
// 过滤器
filters: {
getType(v) {
return typeof (v) + " == " + v;
},
slice(v, num) {
return v.slice(0, num);
}
},
// 挂载完成时执行
mounted() {
console.info("mounted!");
}
})
;
// 也可以后期挂载（绑定root容器）
// vm.$mount("#root");
// 对象属性管理
Object.defineProperty(vm, "user", {
enumerable: true, /* 可以被枚举到 */
// region
// writable: true, /* 可以被修改 */
// configurable: true, /* 可以被删除 */
// end region
get: function () {
return "Midas";
}
});
console.info(vm.username);
console.info(Object.keys(vm));
</body>
</html>
注意：本文归作者所有，未经作者允许，不得转载
