<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<style>
.show {
width: 300px;
height: 100px;
border: 1px solid;
}
.active{
color:green;
}
.isDisable:{
color: yellow;
}
</style>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<!-- <app-nav> -->
<h1 v-text="message">{{ message }}</h1>
<h1 >{{ message }}</h1>
<!-- </app-nav> -->
<!-- <app-view> -->
<div class="show" v-bind:title="message">
鼠标悬停几秒查看此处动态绑定的提示信息
</div>
<div class="show" v-bind:title="tempTime">
v-bind 动态绑定的时间 {{tempTime}}
</div>
<div class="show">
<ol>
<li v-for="item in tempArr">
{{item.text}}
</li>
</ol>
</div>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
<button @click="reverseMessage">逆转消息</button>
<input v-model="message">
<!-- 使用自定义的组件 -->
<ol>
<todo-item v-for='item in tempArr' v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
<div v-once>
{{message}}
</div>
<div v-html="tempHtml"></div>
<div v-if="isShow">
看到我了
</div>
<a :href="tempUrl">tempUrl</a>
<div>
{{ reverseMessage2 }}
</div>
<p>Ask a yes/no question:
<input v-model="question">
</p>
<p>
{{ answer }}
</p>
<p v-bind:class="{ active:isActive }">testClass</p>
<p v-if="isTrue">isTrue</p>
<!-- v-if key -->
<div v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</div>
<div v-else>
<label>Email</label>
<input placeholder="Enter your email addredd" key="email-input">
</div>
<button @click="toggleType">Toggle login type</button>
<ul>
<li v-for="item in tempArr2">
{{item.text}}
</li>
</ul>
123
<ul>
<!-- v-if 用来区过滤显示 -->
<li v-for="item in tempArr2" v-if="!item.id">
{{item.text}} - {{item.id}}
</li>
</ul>
<ul>
<li v-for="(value,key) in tempObj">
{{key}}:{{value}}
</li>
</ul>
<ul>
<li v-for="n in evenNumbers">{{n}}</li>
</ul>
<div>
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<!-- 这里的 is 是指向 自定义的组件 -->
<!-- <li
is="todo-item2"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
>{{todo.id}}-{{todo.title}}</li>
</ul> -->
<ul>
<li
is="todo-item2"
v-for="(todo, index) in todos"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
<!-- v-on 事件 -->
<!--
.stop 阻止单击事件冒泡
.prevent 提交事件不再重载页面
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发才会回调
.once 只执行一次
-->
<div @click="clickFn">
<button @click.stop="clickFn">v-on事件</button>
</div>
<!-- check -->
<input type="checkbox" v-model="checked">
<label for="checked">{{checked}}</label>
<!-- 多个 checkbox ,绑定到同一个数组 -->
<br>
<input type="checkbox" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" value="lili" v-model="checkedNames">
<label for="lili">lili</label>
<input type="checkbox" value="lucy" v-model="checkedNames">
<label for="lucy">lucy</label>
<input type="checkbox" value="meimei" v-model="checkedNames">
<label for="jack">meimei</label>
<br>
<label>{{checkedNames}}</label>
<br>
<!-- <input type="checkbox" v-model="toggle" v-bind:true-value="addNewTodo" v-bind:false-value="addNewTodo"> -->
<input type="text" name="" value="" placeholder="test lazy" v-model.lazy="lazyMsg">
<br>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<ul>
<li
is="sub-component"
v-for="item in tempArr3"
v-bind:title="item">
</li>
<!-- <li
is="todo-item2"
v-for="(todo, index) in todos"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li> -->
<li v-for="item in tempArr3">{{item}}</li>
</ul>
<!-- prop 验证 -->
<!-- 设置传参规则 , 不符合会发警告 -->
<ul>
<li
is="prop-reg"
v-for="item in [1,2,3,55]"
v-bind:propa="item"
></li>
</ul>
<!-- v-on自定义事件 -->
<div>
{{ total }}
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<!-- </app-view> -->
</div>
<script>
//组件
//定义 todo-item 组件
//注意, 全局组件要定义在 Vue 实例前, 否则检测不到
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
let vm = new Vue({
el: '#app',
data: {
message: 'HelloVue!',
tempTime: '页面加载于' + new Date().toLocaleString(),
tempArr: [{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个项目' }],
tempHtml: '<button v-on:click="reverseMessage">tempHtml</button>',
isShow: true,
tempUrl: 'https://www.baidu.com',
question: '',
answer: 'I cannot give you an answer until you ask a question',
isActive: true,
isTrue: true,
loginType: 'username',
tempArr2:[{text:'name1'},{text:'name2',id:true}],
tempObj: {'name':'lwj','age':18},
numbers: [1,2,3,4],
newTodoText: '',
todos:[
{id:1, title:'Do the dishes'},
{id:2, title:'Take out the trash'},
{id:3, title:'Mow the lawn'}
],
nextTodoID: 4,
checked:'',
checkedNames: [],
toggle:'',
lazyMsg:'test',
counter:0,
tempArr3:[1,2,3],
total: 0
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('');
},
getAnswer: function() {
if (this.question.indexOf('?') == -1) {
this.answer = 'Question usually contain a quesion mark';
return
}
this.answer = 'Thinking...';
},
toggleType: function(){
if(this.loginType == 'username'){
this.loginType = 'email'
console.log('0'+this.loginType)
} else {
this.loginType = 'username'
console.log('1'+this.loginType)
}
},
addNewTodo: function(){
this.todos.push({
id:this.nextTodoID++,
title:this.newTodoText
})
this.newTodoText = ''
},
clickFn: function(){
alert('clickFn')
},
incrementTotal: function(){
this.total +=1
}
},
computed: {
reverseMessage2: function() {
return Date.now();
},
evenNumbers: function(){
return this.numbers.filter(function(number){
return number % 2 ==0
})
}
},
watch: {
question: function(newQuestion) {
console.log(newQuestion);
this.answer = 'Watting for you to stop typing...'
var vm = this;
setTimeout(function(){
vm.getAnswer();
},2000)
}
},
components:{
'todo-item2':{
template:'\
<li>\
{{title}}\
<button @click="$emit(\'remove\')">X</button>\
</li>\
',
props:['title']
},
'simple-counter':{
template:'<button @click="counter+=1">{{counter}}</button>',
data:function(){
return {
counter: 0
}
}
},
'sub-component':{
template:'<li>{{value}}</li>',
props:['title'],
data:function(){
return { value: this.title*10}
}
},
'prop-reg':{
template: '<li>{{propa}} {{propb}} {{propc}} {{propd}} {{prope}} {{propf}}</li>',
props:{
propa: Number,
propb: [String, Number],
propc: {
type: String,
require: true
},
propd: {
type: Number,
default: 100
},
prope: {
type: Object,
default: function(){
return { message: 'hello' }
}
},
propf: {
validator :function(value){
return value > 10
}
}
}
},
'button-counter':{
template: '\
<button v-on:click="incrementCounter">{{ counter }}</button>\
',
data: function(){
return {
counter: 0
}
},
methods: {
incrementCounter: function(){
this.counter += 1
this.$emit('increment')
}
}
}
}
})
// $watch 监听
vm.$watch('message', function(newValue, oldValue) {
console.log(newValue, oldValue);
console.log(vm.$el);
console.log(vm.$data);
})
</script>
</body>
</html>