<!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 interpolation expression </ 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"> reversal message </ Button>
</ div>
<div ID = "APP6" class = "Common">
<div class = "title"> (. 6) bi-directional data app6- binding </ div>
<P> Message {} {} </ P>
<INPUT = V-Model "Message">
</ div>
<div ID = "app7" class = "Common">
<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 Lane </ div>
<div the bind-V: class = "classObj"> 2 test pattern - the data object definition in data binding </ div>
<div the bind-V: class = "classObj1">Test pattern 3 - Binding data object is a calculated property returned an object </ div> Test pattern 3 - Binding data object is a calculated property returned an object </ div>
<div v-bind: class = "[activeClass, errorClass]"> test pattern. 4 - pass the array v-bind: class to apply a class list </ div>
<div the bind-V: class = "[? IsActive activeClass: '', errorClass]"> test pattern. 5 - The condition switching list the class </ div>
<div v-bind: class = "[{active: isActive}, errorClass]"> 6 Style Test - The class- switching array syntax list of conditions may be used in a simple object syntax </ div>
<div the bind-V: style = "{color: activeColor, fontSize: fontSize + 'px'}"> 7 style test - the binding inline styles - Object syntax </ div>
<div V-the bind: style = "the styleObject">. 8 style test - tie given inline style object </ div>
<OL>
<TODO V-for-Item = "Item in groceryList" the bind-V: TODO = "Item" the bind-V: Key = "item.id"> </ todo- Item>
</ 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! analytical data attribute value binding ->
<P> V-the Using HTML Directive: <HTML-V = span "rawHtml"> </ span> </ P>
</ div>
<-! Calculation Properties ->
<div ID = "app8" class = "Common">
<div class = "title"> (. 8) app8- computed attribute </ 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 = "Appl2" class = "Common">
<div class = "title"> (12 is) Appl2-V-for </ div>
<UL>
<Li V-for = "Item in items"> {{ }} item.msg </ Li>
</ UL>
<UL>
<- - unique Key!>
<-V for Li = "(Item, index) in itemss" the bind-V: Key = "index"> parentMsg}} {{- {{index}} - {{}} item.msg </ Li>
</ UL>
result of <div> computed- array computed attribute filter or sort </ div>
<UL>
<Li for-= V "in n-evenNumbers"> n-{{}} </ Li>
</ 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 unfinished 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> If you need access to the original statement dom inline processor events, special variables available $ event to be passed to the method </ div>
<div class = "title"> (14) app14- event listener </ div>
<Button ON-V: = the Click ". 1 = counter +"> the Add. 1 </ Button>
<P> above button is clicked {{ secondary counter}} </ P>
</ div>
<div ID = "app15" class = "Common">
<div class = "title"> (15) app15- event processing method </ div>
<Button ON-V : = the Click "the greet"> Greet </ Button>
</ div>
<div ID = "app16" class = "Common">
<div class = "title"> method app16- inline processor (16) < / div>
<Button ON-V: the Click = "say ( 'Hi')"> say Hi </ Button>
<Button ON-V:
</div>
<Button V-ON: the Click = "The warn ( 'form CAN Not BE submitted', $ Event)"> the Submit </ Button>
<div ID = "of APP17" class = "Common">
<div class = "title"> ( 17) app17- event modifier </ div>
<-! VUE provides a v-on event modifiers ->
<- - .stop prevent incidents continue to spread!>
<a v-on: click.stop = "doThis"> </a>
! <- .prevent submit incidents will not reload the page ->
<form v-ON: submit.prevent = "the dosubmit"> </ form>
! <- modifier series ->
<a v-on:click.stop.prevent="doWhat"> </a>
<- only modifier ->!
<form v-ON: submit.prevent> </ form>
<- use when adding an event listener event capture mode, an event that is triggered by the element itself first in this process, and then handed over to the internal processing elements ->!
<div v-ON: click.capture = "doThis "> </ div>
<-! Event.target only when the trigger is a function of the current processing element itself, that event is not triggered from the internal element ->
<target process is triggered when the current element function itself, that event is not triggered from inside element ->
<div v-ON: click.self = "dothat"> ... </ div>
<! - click event is triggered only once ->
<a v-on:click.once="doThis"> </a>
<! - default behavior .passive scroll event will be triggered immediately without waiting for the completion of onScroll , can improve the performance of the moving end ->
<div V-ON: scoll.passive = "onScroll"> ... </ div>
! <- when using the modifier, the order is important; the corresponding code in the same order production. Therefore, with v-on: click.prevent.self
blocks all clicks and v-on: click.self.prevent will prevent clicks on the element itself. ->
<! - Do not use with .passive and .prevent, because .prevent will be ignored and the browser may show you
a warning. Remember, .passive tells the browser that you do not want to prevent the default behavior of the event. ->
</ div>
<div the above mentioned id = "app18" class = "the Common">
<- only invoked when the key is vm.submit the Enter () ->!
<The INPUT v-ON: keyup.enter = "
<!-- 按键码 -->
<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>
<-! When checked, `picked` a string" a "->
<div class="parting-line">
<div> value binding </ div>
<INPUT type = "Radio" = V-Model "the Picked" value = "A">
<-! `toggle` true or to false ->
<INPUT type =" CheckBox ">" v-Model = "Toggle
- when you select the first option,` selected` a string <! "abc" ->
<Model-the SELECT v = "the Selected">
<the option value = "abc" > the ABC </ Option>
</ SELECT>
</ div>
<div class = "Parting-Line">
<div> box </ div>
<INPUT
type = "checkBox"
V =-Model "toggles"
true-value="yes"
false-value="no"
/>
</div>
<div class = "Parting-Line">all-item ', {
props: [' all '],
<div> Modifier </ div>
<-! default v-model synchronization, can thus by adding lazy modifier in each input data value and event-triggered after the input box
into a change event synchronization - ->
<! - not updated at the time of change iNPUT ->
<iNPUT = V-model.lazy "MSG">
<! - to automatically user input value into a numeric type, v-model can give adding modifier number ->
<iNPUT = V-model.number "MSG" type = "number" />
<-! blank to automatically filter and last character entered by the user can add a modifier to trim v-model - >
<INPUT = V-model.trim "MSG" />
</ div>
</ div>
<Script>
// global registration assembly, in place can refer app7
Vue.component ( 'TODO-Item', {
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 ()
was app3 = new Vue ({
})
}
EL: "# App3",
Data: {
Seen: to true
}
})
var APP4 = new new Vue ({
EL: "# APP4",
Data: {
Todos: [
{ID:. 1, text: 'Learning JS'},
{ id: 2, text: 'learning VUE'},
{ID:. 3, text: 'learning Node'},
]
}
})
var APP5 = new new Vue ({
EL: '# APP5',
Data: {
Message: 'hello view '
},
Methods: {
reverseMessage: function () {
This.message = this.message.split ( '') Reverse () the Join.. ( '')
}
}
})
Var = APP6 new new Vue ({
EL: '# APP6',
Data: {
Message: 'klll DSS '
}
})
var app7 = new new Vue ({
EL:' # app7 ',
Data: {
groceryList: [
{ID: 2, text:' vegetables'},
{ID:. 3, text: 'cheese'},
{ id: 4, text: 'just the beginning of the era but'}
],
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',
// the fullName: 'FF LL'
},
// listening watch may be selected attribute may be selected computed calculated recommended to calculate properties
computed: {
the fullName: function () {
return this.fName + '' + the this. lName
}
},
Watch: {
fName: function (Val) {
this.fullName = Val + '' + this.lastName
},
lName: function (Val) {
this.fullName = this.fName + '' + Val
}
}
app10 new new Vue = var ({
EL: '# app10',
var = newValue.split names ( '');
this.fNames name = [0];
this.lNames = names [names.length - 1];
Data: {
fNames: 'FF',
the LNAMES: 'LL',
// fullNames: 'FF LL'
},
// listening watch may be selected attribute may be selected computed calculated recommended to calculate properties
computed: {
fullNames: {
GET: function ( ) {
return this.fNames + '' + this.lNames
},
SET: function (newValue) {
}
}
}
})
var = app11 new 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: to true, value: '12 is'},
{isComplete: to false, value: '22 is'},
{isComplete: to false, value: '33 is'}
]
},
computed: {
evenNumbers: function () {
// filter out of the filter elements divisible by 2
return this.numbers.filter (function (Number) {
return 0 Number% === 2
})
}
},
Methods: {
the even: function (Numbers) {
return numbers.filter (function (Number) {
return 0 Number% === 2
})
}
}
})
var = APP13 new 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>