本文将深入探讨一个 Vue.js 的示例项目，通过分析 `vue.html` 文件的源码，揭示Vue如何实现组件化、数据绑定和事件处理等核心特性。
vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.isActive {
color: green;
}
.isError {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1>{{message}} {{num+1}}</h1> -->
<h1>{{message}}</h1>
<h1>{{reversedMessage}}</h1>
<!-- 绑定自定义属性 data-id -->
<!-- <div><a :href="href" :data-id="message" :class="{'isActive':see,'isError':'!see'}">百度</a></div> -->
<!-- <div><a :href="href" :data-id="message" :class="['a',message,{'isActive':see}]" :style="styles">百度</a></div> -->
<div><a :href="href" :data-id="message" :class="['a',message,{'isActive':see}]" :style="[style1,style2]">百度</a></div>
<h1>条件渲染</h1>
<div>
<div v-if='see'>if true</div>
<div v-else>if false</div>
<div v-show='see'>show true</div>
</div>
<button v-on:click='clickfn("hello")'>click me</button>
<div v-if="see">
<!-- 登录: <input type="text" placeholder="login" key="login"> -->
登录: <input type="text" placeholder="login" v-model="textVal">
</div>
<div v-else>
<!-- 注册: <input type="text" placeholder="register" key="reg"> -->
注册: <input type="text" placeholder="register" v-model="radioVal">
</div>
<h1>v-for</h1>
<button @click="persons.splice(0,1)">cut</button>
<ul>
<!-- <li v-for='(item,index) in persons' v-if=" item.age>40"> {{index+1}}--I am {{item.name}}, I'm {{item.age}} -->
<!-- dom复用，加key为了防止dom复用，没有key会dom复用 -->
<li v-for='(item,index) in persons' :key="item.name"> {{index+1}}--I am {{item.name}}, I'm {{item.age}}
<input type="text">
</li>
</ul>
<h1>computed</h1>
<ul>
<li v-for='(item,index) in newPersons'>
{{index+1}}--I am {{item.name}}, I'm {{item.age}}
</li>
</ul>
<h1>obj</h1>
<ul>
<li v-for='(item,name) in obj'>
{{name}}:{{item}}
</li>
</ul>
<h1>v-on</h1>
<div>
<!-- <button v-on:click='see=!see'>click me</button> -->
<!-- <button v-on:click='clickfn'>click me</button> -->
<button v-on:click='clickfn("hello")'>click me</button>
<input type="text" @input='clickfn' v-model="textVal" />{{textVal}}
<div>
<label for="a">A</label>
<input type="radio" value="0" id="a" v-model="radioVal">
<label for="b">B</label>
<input type="radio" value="1" id="b" v-model="radioVal">
<label for="c">C</label>
<input type="radio" value="2" id="c" v-model="radioVal"> {{radioVal}}
</div>
<div>
<label for="d">D</label>
<input type="checkbox" value="0" id="d" v-model="checkboxVal">
<label for="e">E</label>
<input type="checkbox" value="1" id="e" v-model="checkboxVal">
<label for="f">F</label>
<input type="checkbox" value="2" id="f" v-model="checkboxVal"> {{checkboxVal}}
</div>
<div>
<select v-model="selectVal">
<option value="0">A</option>
<option value="1">B</option>
<option>C</option>
<option>D</option>
</select> {{selectVal}}
</div>
</div>
<div>
question:<input type="text" placeholder="enter" v-model="question"> answer: {{answer}}
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
styles: [{
fontSize: '20px',
background: 'yellow'
}, {
color: '#000'
}],
style1: {
fontSize: '20px',
background: 'yellow'
},
style2: {
color: '#000'
},
question: '',
answer: 'no answer',
textVal: '123',
radioVal: '0',
checkboxVal: [],
selectVal: '0',
href: 'www.baidu.com',
message: 'hello vue',
num: 1,
see: true,
persons: [{
name: '111',
age: 11
}, {
name: '222',
age: 21
}, {
name: '333',
age: 31
}, {
name: '444',
age: 41
}],
obj: {
name: '444',
age: 41
}
},
methods: {
clickfn: function(val) {
this.see = !this.see;
// alert(val);
}
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
},
newPersons: function() {
return this.persons.filter(function(item) {
return item.age > 40
})
}
},
watch: {
question: function() {
this.answer = 'waiting';
var _this = this;
setTimeout(() => {
_this.answer = '404'
}, 1000);
}
}
})
</script>
</html>
扫一扫
5894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
