源码地址 https://gitee.com/chenxb666/java/tree/master/vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ div }}</div>
<div v-text="vtext"></div>
<div v-bind:title="vbind">鼠标悬停几秒钟查看此处动态绑定的提示信息!</div>
<div :title="vbind">v-bind 缩写,鼠标悬停几秒钟查看此处动态绑定的提示信息</div>
<div v-html="vhtml"></div>
<div v-if="vif">v-if显示隐藏</div>
<div v-show="vshow">v-show显示隐藏</div>
<div>{{message}}</div>
<div>{{reversedMessage}}</div>
<div>{{now}}</div>
<div>
<button v-on:click="alert">点击</button>
</div>
<input v-on:keyup.enter="enter" placeholder="测试监听enter">
<div>
{{vmodel}}
<input v-model="vmodel" placeholder="测试v-model">
</div>
<div>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<div>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<div>
单选
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<div>
多选
<select v-model="selectedMulti" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selectedMulti }}</span>
</div>
<div>
用 v-for 渲染的动态选项:
<select v-model="selectedFor">
<option v-for="option in optionsFor" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selectedFor }}</span>
</div>
<div>
.trim
过滤首尾空白字符
<input v-model.trim="message">
</div>
<div>
.lazy
change 事件之后同步
<input v-model.lazy="message">
</div>
<!-- 组件-->
<div>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<div>
<blog-post title="向组件传递的标题">插槽分发内容</blog-post>
</div>
</div>
<script>
//组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">测试组件 {{ count }}</button>'
})
Vue.component('blog-post', {
props: ['title'],
template: '<div><h3 style="color:red">{{ title }}</h3><h3>每个组件只有一个根元素</h3><slot></slot></div>'
})
// //路由
// const Home = { template: '<p>home page</p>' }
// const About = { template: '<p>about page</p>' }
// const routes = {
// '/': Home,
// '/about': About
// }
new Vue({
el: '#app',
data: {
div: '测试行内绑定',
vtext: '测试v-text',
vbind: '测试v-bind',
vhtml: '<div style="color:#ff0000">vhtml插入HTML</div>',
vif: true,
vshow: false,
message: 'hello',
vmodel: '',
checked: false,
checkedNames: [],
picked: '',
selected: '',
selectedMulti: [],
selectedFor: 'A',
optionsFor: [
{text: 'One', value: 'One'},
{text: 'Two', value: 'Two'},
{text: 'Three', value: 'Three'}
],
currentRoute: window.location.pathname//路由
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
},
now: function () {
return "测试computed缓存" + Date.now()
},
// ViewComponent () {//路由
// return routes[this.currentRoute] || NotFound
// },
// render (h) { return h(this.ViewComponent) }
},
methods: {
alert() {
alert("测试v-on")
},
enter() {
alert("测试监听enter")
}
},
})
</script>
</body>
</html>