<!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<style>
.active {
color: skyblue;
}
.text-danger {
color: red;
}
div {
font-size: 14px;
font-weight: normal;
color: grey;
}
.title {
font-size: 22px;
font-weight: bolder;
color: skyblue;
}
.common{
margin-top:20px;
margin-bottom:20px;
border-top:2px dashed gainsboro;
}
.parting-line{
background: peachpuff;
margin:20px;
}
</style>
</head>
<body>
<div id="app1" class="common">
<div class="title">(1) app1 插值表达式</div>
{{message}}
</div>
<div id="app2" class="common">
<div class="title">(2) app2 v-bind</div>
<span v-bind:title="message">鼠标悬停几秒看效果</span>
</div>
<div id="app3" class="common">
<div class="title">(3) app3 v-if</div>
<p v-if="seen">现在你看到我了</p>
</div>
<div id="app4" class="common">
<div class="title">(4) app4 v-for</div>
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<div id="app5" class="common">
<div class="title">(5) app5 v-on:click</div>
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app6" class="common">
<div class="title">(6) app6-双向数据绑定</div>
<p>{{message}}</p>
<input v-model="message">
</div>
<div id="app7" class="common">
<div class="title">(7) app7-v-html-组件-绑定class对象</div>
<div v-bind:class="{active:isActive}">1样式测试-绑定的数据对象定义在模板里</div>
<div v-bind:class="classObj">2样式测试-绑定的数据对象定义在data中</div>
<div v-bind:class="classObj1">3样式测试-绑定的数据对象是一个返回对象的计算属性</div>
<div v-bind:class="[activeClass,errorClass]">4样式测试-把数组传给v-bind:class以应用一个class列表</div>
<div v-bind:class="[isActive?activeClass:'',errorClass]">5样式测试-根据条件切换列表中的class</div>
<div v-bind:class="[{active:isActive},errorClass]">6样式测试-根据条件切换列表中的class-数组语法中可以使用对象语法简单</div>
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">7样式测试-绑定内联样式-对象语法</div>
<div v-bind:style="styleObject">8样式测试-绑定内联样式对象</div>
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
<p>Using mustaches: {{ rawHtml }}</p>
<!-- v-html把其当成html进行解析，span内容将会替换成属性值rawHtml，直接作为html，忽略解析属性值中的数据绑定 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<!-- 计算属性 -->
<div id="app8" class="common">
<div class="title">(8) app8-计算属性</div>
<p>Original msg:"{{message}}"</p>
<p>Computed reversed message:"{{reverseMessage}}"</p>
</div>
<div id="app9" class="common">
<div class="title">(9) app9-watch</div>
{{fullName}}
</div>
<div id="app10" class="common">
<div class="title">(10) app10-setter</div>
{{fullNames}}
</div>
<div id="app11" class="common">
<div class="title">(11) app11-watch</div>
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<div id="app12" class="common">
<div class="title">(12) app12-v-for</div>
<ul>
<li v-for="item in items"> {{item.msg}} </li>
</ul>
<ul>
<!-- 唯一key -->
<li v-for="(item,index) in itemss" v-bind:key="index">{{parentMsg}} - {{index}} - {{item.msg}} </li>
</ul>
<div>计算属性computed-数组过滤或排序后的结果</div>
<ul>
<li v-for="n in evenNumbers">{{n}}</li>
</ul>
<div>methods-数组过滤或排序后的结果</div>
<ul>
<li v-for="n in even(numbers)">{{n}}</li>
</ul>
<div>将只渲染未完成的todo</div>
<ul>
<li v-for="todo in todos" v-if="!todo.isComplete">
{{todo}}
</li>
</ul>
</div>
<div id="app13" class="common">
<div class="title">(13) app13-v-for-todo</div>
<form v-on:submit.prevent="addNewTodo">
<label>Add a todo</label>
<input v-model="newTodoText" id="new-todo" placeholder="E.G. Feed the cat">
<button>Add</button>
</form>
<ul>
<li is="todo-item" v-for="(todo,index) in todos" v-bind:key="todo.id" v-bind:title="todo.title"
v-on:remove="todos.splice(index,1)"></li>
</ul>
</div>
<div id="app14" class="common">
<div class="title">(14) app14-监听事件</div>
<button v-on:click="counter += 1">Add 1</button>
<p>上面按钮被点击了{{counter}}次</p>
</div>
<div id="app15" class="common">
<div class="title">(15) app15-事件处理方法</div>
<button v-on:click="greet">Greet</button>
</div>
<div id="app16" class="common">
<div class="title">(16) app16-内联处理器中的方法</div>
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('what')">say what</button>
<div>如需在内联语句处理器中访问原始dom事件，可用特殊变量$event将其传入方法</div>
<button v-on:click="warn('form cannot be submitted',$event)">Submit</button>
</div>
<div id="app17" class="common">
<div class="title">(17) app17-事件修饰符</div>
<!-- vue为v-on提供了事件修饰符 -->
<!-- .stop阻止事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- .prevent提交事件不再重载页面 -->
<form v-on:submit.prevent="doSubmit"></form>
<!-- 修饰符串联 -->
<a v-on:click.stop.prevent="doWhat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后再交由内部元素处理 -->
<div v-on:click.capture="doThis"></div>
<!-- 只当在event.target是当前元素自身时处理触发函数，即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件只触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- .passive滚动事件的默认行为将立即触发而不会等待onScroll完成,能提升移动端的性能 -->
<div v-on:scoll.passive="onScroll">...</div>
<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self
会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->
<!-- 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示
一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。 -->
</div>
<div id="app18" class="common">
<div class="title">(18) app18-按键修饰符</div>
<!-- 只有在key为enter时调用vm.submit() -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
<!-- 按键码 -->
<input v-on:keyup.13="submit">
</div>
<div id="app19" class="common">
<div class="title">(19) app19-表单操作</div>
<div class="parting-line">
<div>input:</div>
<input v-model="msg" placeholder="edit" />
<p>msg:{{msg}}</p>
</div>
<div class="parting-line">
<div>textarea:</div>
<span>multiline msg:</span>
<p style="white-space:pre-line;">{{message}}</p>
<br />
<textarea v-model="message" placeholder="mutiple lines"></textarea>
</div>
<div class="parting-line">
<div>checkbox:</div>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{checked}}</label>
</div>
<div class="parting-line">
<div>多个复选框，绑定到同一个数组：</div>
<div id="mul-checkbox">
<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>
<div class="parting-line">
<div>单选按钮radio</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 class="parting-line">
<div>选择框select</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 class="parting-line">
<div>v-for渲染的动态选项</div>
<select v-model="selected1">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span>selected:{{selected1}}</span>
</div>
<div class="parting-line">
<div>值绑定</div>
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
</div>
<div class="parting-line">
<div>复选框</div>
<input
type="checkbox"
v-model="toggles"
true-value="yes"
false-value="no"
/>
</div>
<div class="parting-line">
<div>修饰符</div>
<!-- 默认情况v-model在每次input事件触发后将输入框的值与数据进行同步，可以通过添加lazy修饰符从而
转变为使用change事件进行同步 -->
<!-- 在change时而非input时更新 -->
<input v-model.lazy="msg">
<!-- 若想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符 -->
<input v-model.number="msg" type="number" />
<!-- 若要自动过滤用户输入的首尾空白字符可以给v-model添加trim修饰符 -->
<input v-model.trim="msg" />
</div>
</div>
<script>
// 全局注册组件,app7内的地方都可以引用
Vue.component('todo-item', {
props: ['todo'],
template: `<li v-bind:id="todo.id">{{todo.text}}</li>`
})
Vue.component('todo-item', {
template: `
<li>\
{{title}}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
`,
props: ['title']
})
var app = new Vue({
el: "#app1",
data: {
message: 'hello vue'
}
})
var app2 = new Vue({
el: "#app2",
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el: "#app3",
data: {
seen: true
}
})
var app4 = new Vue({
el: "#app4",
data: {
todos: [
{ id: 1, text: '学习js' },
{ id: 2, text: '学习vue' },
{ id: 3, text: '学习node' },
]
}
})
var app5 = new Vue({
el: '#app5',
data: {
message: 'hello vue'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app6',
data: {
message: 'klll dss'
}
})
var app7 = new Vue({
el: '#app7',
data: {
groceryList: [
{ id: 2, text: '蔬菜' },
{ id: 3, text: '奶酪' },
{ id: 4, text: '随便时代开始的但是' }
],
rawHtml: "<span style='color:red'>this should be red</span>",
isActive: true,
classObj: {
active: false,
'text-danger': true
},
isActive: true,
error: null,
activeClass: 'active',
errorClass: 'text-danger',
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '21px'
}
},
computed: {
classObj1: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
var app8 = new Vue({
el: '#app8',
data: {
message: 'ddd fff'
},
computed: {
// 计算属性的getter
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
var app9 = new Vue({
el: '#app9',
data: {
fName: 'ff',
lName: 'll',
// fullName:'ff ll'
},
// 可以选择watch监听可以选择computed计算属性，推荐计算属性
computed: {
fullName: function () {
return this.fName + ' ' + this.lName
}
},
watch: {
fName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lName: function (val) {
this.fullName = this.fName + ' ' + val
}
}
})
var app10 = new Vue({
el: '#app10',
data: {
fNames: 'ff',
lNames: 'll',
// fullNames:'ff ll'
},
// 可以选择watch监听可以选择computed计算属性，推荐计算属性
computed: {
fullNames: {
get: function () {
return this.fNames + ' ' + this.lNames
},
set: function (newValue) {
var names = newValue.split(' ');
this.fNames = name[0];
this.lNames = names[names.length - 1];
}
}
}
})
var app11 = new Vue({
el: '#app11',
data: {
question: '',
answer: 'i cannot give you an answer until you ask a question'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'waiting for you to stop typing...'
this.debouncedGetAnser()
}
},
created() {
this.debouncedGetAnser = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'thisingk...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'error ' + error
})
}
}
})
var app12 = new Vue({
el: '#app12',
data: {
items: [
{ msg: 'fj' },
{ msg: 'fdss' }
],
parentMsg: 'parent',
itemss: [
{ msg: 'dssd' },
{ msg: 'dsdsde' }
],
numbers: [1, 2, 3, 4, 5],
todos: [
{ isComplete: true, value: '12' },
{ isComplete: false, value: '22' },
{ isComplete: false, value: '33' }
]
},
computed: {
evenNumbers: function () {
// filter过滤出能被2整除的元素
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
var app13 = new Vue({
el: '#app13',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId:4
},
methods:{
addNewTodo:function(){
this.todos.push({
id:this.nextTodoId++,
title:this.newTodoText
})
this.newTodoText = ''
}
}
})
var app14 = new Vue({
el:'#app14',
data:{
counter:0
}
})
var app15 = new Vue({
el:'#app15',
data:{
name:'vue.js'
},
methods:{
greet:function(event){
alert('hello ' + this.name)
if(event){
alert(event.target.tagName)
}
}
}
})
app15.greet();
var app16 = new Vue({
el:'#app16',
methods:{
say:function(msg){
alert(msg);
},
warn:function(msg,event){
if(event){
console.log(event,'e')
event.preventDefault();
}
alert(msg);
}
}
})
var app19 = new Vue({
el:'#app19',
data:{
msg:'fs',
message:'dsdss',
checked:'true',
checkedNames:[],
picked:'',
selected:'',
selected1:'B',
options:[
{text:'One', value:'A'},
{text:'Two', value:'B'},
{text:'Three', value:'C'}
],
picked:'',
toggle:'',
toggles:'yes'
}
})
</script>
</body>
</html>