ArticleIt has been published on personal blogs and is constantly updated. Welcome to collect and subscribe, or make criticism.
Some methods and functions may not be used very often, but they cannot be remembered when meeting the needs of a specific scene. Therefore, it is necessary to record these methods and functions encountered at ordinary times and query them when necessary.
- String inversion
- Todos
- Check form
- Dynamic options, rendering with v-for
- Instruction instance properties
- Object literal
- MVVM data binding
- Use v-if or v-show to determine the condition.
- Directive
- Dynamic component
- Use script or template tags
- Use props
- Use script or template tags
String inversion
reverseMessage: function () {
this.msg = this.msg.split('').reverse().join('')
}
Todos
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="(todo,index) in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo(index)">X</button>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<!--<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>-->
<script>
new Vue({
data: {
newTodo: '',
todos: [
{text: 'Add some todos'}
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim();
if (text) {
this.todos.push({text: text});
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
}).$mount('#app')
</script>
Check form
<div id="app">
<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>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
checkedNames:[]
}
})
</script>
Dynamic options, rendering with v-for
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<br>
<span>Selected: {{selected}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
selected:'A',
options:[
{text:'One',value:'A'},
{text:'Two',value:'B'},
{text:'Three',value:'C'}
]
}
})
</script>
Instruction instance properties
<div id="app">
<div id="demo" v-demo:hello.a.b="msg"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.directive('demo', {
bind() {
document.write('demo bound! This is a test dialog.')
},
update(value) {
this.el.innerHTML =
`name - ` + this.name + `<br>` +
`expression - ` + this.expression + `<br>` +
`argument - ` + this.arg + `<br>` +
`modifiers - ` + JSON.stringify(this.modifiers) + `<br>` +
`value - ` + value
}
});
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js!'
}
})
</script>
Object literal
<div id="app">
<div v-demo="styleObj"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.directive('demo', () => {
console.log(styleObj.color);
console.log(styleObj.text)
});
var styleObj = {
color: 'red',
text: 'Hello!'
};
var vm = new Vue({
el: '#app',
data: {
styleObj: styleObj
}
})
</script>
MVVM data binding
<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 双向绑定 -->
<input v-model="msg">
Use v-if or v-show to determine the condition.
<div id="app">
<section v-if="loginStatus">
输入您的姓名:<input type="text" v-model="name">
<button @click="say">欢迎点击</button>
<button @click="switchLoginStatus">退出登录</button>
</section>
<section v-if="!loginStatus">
登录用户:<input type="text">
登录密码:<input type="password">
<button @click="switchLoginStatus">登录</button>
</section>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
var vm = new Vue({
data: {
name: '_Appian',
loginStatus: true
},
methods: {
say: function () {
alert('欢迎' + this.name)
},
switchLoginStatus: function () {
this.loginStatus = !this.loginStatus;
}
}
}).$mount('#app')
</script>
Directive
Verify what Todo List has entered (form verification). The basic logic lies in
bind
Phase when binding events, and then according to theupdate
When the incoming minlength value to judge.
Directive’s basic structure is as follows:
Vue.directive("minlength", {
bind: function () {
},
update: function (value) {
},
unbind: function () {
}
});
Vue.directive("minlength", {
bind: function () {
var self = this,
el = this.el;
el.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
if (el.value.length < self.minlength) {
e.preventDefault();
}
}
});
var submit = el.parentNode.querySelector("button,[type='submit']");
submit.disabled = true;
el.addEventListener("keyup", function (e) {
submit.disabled = (el.value.length < self.minlength);
})
},
update: function (value) {
this.minlength = parseInt(value);
},
unbind: function () {
}
});
Dynamic component
<div id="app">
<button id="home">Home</button>
<button id="posts">Posts</button>
<button id="archive">Archive</button>
<br>
<component :is="currentView"></component>
</div>
var vm = new Vue({
data: {
currentView: "home"
},
components: {
home: {
template: `<div>Home</div>`
},
posts: {
template: `<div>Posts</div>`
},
archive: {
template: `<div>Archive</div>`
}
}
}).$mount('#app');
document.getElementById('home').onclick = function () {
vm.currentView = "home";
};
document.getElementById('posts').onclick = function () {
vm.currentView = "posts";
};
document.getElementById('archive').onclick = function () {
vm.currentView = "archive";
};
Use script or template tags
Use script tags
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>This is a test component.</div>
</script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('my-component', {
template: `#myComponent`
});
new Vue({
el: "#app"
});
</script>
Use template label
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>This is a test component.</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('my-component', {
template: `#myComponent`
});
new Vue({
el: "#app"
});
</script>
Use props
The scope of the component instance is isolated. This means that the data of the parent component cannot and should not be directly referenced within the template of the child component. Can be usedprops
Pass the data to the subcomponents.
Props basic example
// 将父组件数据通过已定义好的props属性传递给子组件
<div id="app">
<my-component :my-name="name" :my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<thead>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
</thead>
<tbody>
<tr>
<td>my name</td>
<td>{{myName}}</td>
</tr>
<tr>
<td>my age</td>
<td>{{myAge}}</td>
</tr>
</tbody>
</table>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: `#myComponent`,
props: ['myName', 'myAge']
}
}
});
</script>
If we want to use the data of the parent component, we must first define it in the child component.props
Property, that isprops: [‘myName', ‘myAge']
This line of code.
Note:Defined in subcomponents
prop
When using thecamelCase
Nomenclature. Because HTML features are not case sensitive,camelCase
Theprop
For features, you need to convert tokebab-case
(separated by dashes). For example, inprop
As defined inmyName
Which needs to be converted to when used as a propertymy-name
.
When using a child component in a parent component, data is passed to the child component by the following syntax:
<child-component v-bind:子组件prop="父组件数据属性"></child-component>
Binding type for prop
Unidirectional binding
- The data of the child component was modified without affecting the data of the parent component.
- The data of the parent component was modified and the child components were affected.
prop
The default is one-way binding: when the attribute of the parent component changes, it will be conducted to the child component, but not vice versa. This is to prevent the child component from inadvertently modifying the state of the parent component.
Bidirectional binding
Can be used.sync
Explicitly specify bidirectional binding, which causes data modifications of child components to be passed back to the parent component.