head
<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: Gray;
}
.title {
font-size: 22px;
font-weight: Bolder;
Color: Skyblue;
}
</ style>
</ head>
Example. 1:
<div ID = "App1">
<div class = "title "> (1) app1 interpolation expression </ div>
{}} {Message
</ div>
var App = new new Vue ({
EL:" App1 # ",
Data: {
Message: 'Hello VUE'
}
})
example 2 :
<div ID = "App2">
<div class="title">(2) app2 v-bind</div>
<span the bind-V: title = "Message"> hover seconds see results </ span>
</ div>
var = app2 new view ({
EL: "# App2",
Data: {
Message: 'page loaded' + new new a Date () toLocaleString ().
}
})
Example. 3:
<div ID = "App3">
<div class = "title"> (. 3 ) app3 v-IF </ div>
<the p-v-IF = "seen"> now you see me </ the p->
</ div>
var = app3 new new Vue ({
EL: "# app3",
the Data: {
Seen: to true
}
})
example. 4:
<div ID = "APP4">
<div class = "title"> (. 4) for APP4-V </ div>
<OL>
<li v-for="todo in todos">{{todo.text}}</li>
</ OL>
</ div>
var app4 = new Vue({
el: "#app4",
data: {
Todos: [
{ID:. 1, text: 'Learning JS'},
{ID: 2, text: 'Learning VUE'},
{ID:. 3, text : 'learning Node'},
]
}
})
example. 5:
<div ID = "APP5">
<div class = "title"> (. 5) APP5 V-ON: the Click </ div>
<P> {{Message} } </ P>
<Button ON-V: the Click = "reverseMessage"> reversal message </ Button>
</ div>
var = APP5 new new Vue ({
EL: '# APP5',
Data: {
message: 'hello vue'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
实例6：
<div id="app6">
<div class="title">(6) app6-双向数据绑定</div>
<p>{{message}}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app6',
data: {
message: 'klll dss'
}
})
实例7：
<div id="app7">
<div class="title">(7) app7-v-html- assembly - bound class object </ div>
<div the bind-V: class = "{Active: isActive}"> test pattern. 1 - bound data object definition in the template where </ div>
<div v-bind: class = "classObj"> 2 test pattern - the data object definition in data binding </ div>
<div v-bind: class = "classObj1"> 3 test pattern - bound data object is a calculated attribute object returns </ div>
<div the bind-V: class = "[activeClass, errorClass]"> pattern. 4 test - to pass the array v-bind: class apply to a class list </ div>
<div v-bind: class = "[? isActive activeClass: '', errorClass]"> test pattern. 5 - the switching condition list. the class </ div>
<div the bind-V: class = "[{Active: isActive}, errorClass]"> test pattern. 6 - the class- switching array syntax list of conditions may be used in a simple object syntax </ div>
<div v-bind: style = "{color: activeColor, fontSize: fontSize + 'px'}"> 7 style test - the binding inline styles - Object syntax </ div>
<div V-the bind: style = "the styleObject" > 8 test pattern - the inline style Object binding </ div>
<OL>
<TODO V-for-Item = "Item in groceryList" the bind-V: = TODO "
</ol>
<P> the Using mustaches: rawHtml {{}} </ P>
<- which as the V-html html parsing, span content will be replaced with the attribute values rawHtml, directly as html, ignoring the parsed data attribute values! binding ->
<the p-> v-the Using HTML Directive: <v-span HTML = "rawHtml"> </ span> </ the p->
</ div>
// global registration component, place in app7 can reference
Vue .component ( 'TODO-Item', {
The props: [ 'TODO'],
Template: `<Li the bind-V: ID =" todo.id "> todo.text {{}} </ Li>`
})
var = new new Vue app7 ({
EL: '# app7',
Data: {
groceryList: [
{ID: 2, text: 'vegetables'},
{ID:. 3, text: 'cheese'},
{Id: 4, text: 'start times, but casual'}
],}
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'
}
}
}
})
实例8：
<!-- 计算属性 -->
<div id="app8">
<div class="title">(8) app8-计算属性</div>
<p>Original msg:"{{message}}"</p>
<p>Computed reversed message:"{{reverseMessage}}"</p>
</div>
var app8 = new Vue({
el: '#app8',
data: {
message: 'ddd fff'
Computed: {
},
// Calculation property getters
reverseMessage: function () {
return this.message.split ( '') Reverse () the Join.. ( '')
}
}
})
Example. 9:
<div ID = "the APP9">
<div class = "title"> (. 9) the APP9-Watch </ div>
{{the fullName}}
</ div>
var the APP9 = new new Vue ({
EL: '# the APP9',
Data: {
fName: 'FF',
lName: ' LL ',
// the fullName:' FF LL '
},
// listening watch may be selected attribute may be selected computed calculated recommended to calculate properties
computed:{
fullName: function () {
return this.fName + ' ' + this.lNamefName + ' ' + this.lName
}
},
watch: {
fName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lName: function (val) {
this.fullName = this.fName + ' ' + val
}
}
})
实例10：
<div id="app10">
<div class="title">(10) app10-setter</div>
{{fullNames}}
</div>
var app10 = new Vue({
el: '#app10',
data: {
fNames:'Ff'
the LNAMES: 'LL',
<div class =" title ">(11) app11-watch</div>
// fullNames:'ff ll'
},
// can choose to watch the listener can choose to calculate the computed property is recommended to calculate properties
computed: {
fullNames: {
GET: function () {
return this.fNames + '' + this.lNames
},
SET: function (newValue) {
var names = newValue.split ( '');
this.fNames = name [0];
this.lNames = names [of names.length -. 1];
}
}
}
})
example. 11:
<div ID = "app11">
<P>
the Ask a yes / no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
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
})
}
}
})
实例12：
<div id="app12">
<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>Calculated results computed- array filter or sort attribute </ div>
<-V for Li = "n-in evenNumbers"> n-{{}} </ Li>
<UL>
</ UL>
<div> result of the filter or sort the array methods- </ div>
<UL>
<-V for Li = "n-in the even (Numbers)"> n-{{}} </ Li>
</ UL >
<div> will only render todo unfinished </ div>
<UL>
<-V for Li = "Todos todo in" V-IF = "! todo.isComplete">
{{todo}}
</li>
</ul>
</ div>
var = new new Vue Appl2 ({
EL: '# Appl2',
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
})
}
}
})
实例13：
<div id="app13">
<div class="title">(13) app12-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>
Vue.component('todo-item', {
template: `
<li>\
{{title}}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
`,
props: ['title']
})
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 = ''
}
}
})