This time I will bring you a summary of the common instructions of vue.js. What are the precautions when using the common instructions of vue.js. The following is a practical case, let's take a look.
Vue.js is a very popular JavaScript MVVM (Model-View-ViewModel) library. It is built with data-driven and componentized ideas. Compared with Angular.js, Vue.js provides a simpler and easier-to-understand API, allowing us to quickly get started and use Vue.js.
If you have been accustomed to using jQuery to operate the DOM before, please put aside the idea of manipulating the DOM manually when learning Vue.js, because Vue.js is data-driven, and you do not need to manually operate the DOM. It binds DOM and data through some special HTML syntax. Once you create the binding, the DOM will stay in sync with the data, and whenever the data changes, the DOM will be updated accordingly.
Of course, when using Vue.js, you can also use it in conjunction with other libraries, such as jQuery.
1.Use
The process of using Vue is the process of defining the various components of MVVM (Model-View-ViewModel).
<!--这里定义View-->
<p id="app">{{ message }}</p>
<script src="js/vue.js"></script>
<script>
// 这里定义Model
var exampleData = {
message: 'Hello World!'
}
// 这里创建一个 Vue 实例或 "ViewModel"
// 连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>Copy after login
2. Common instructions of Vue.js
Vue.js provides some commonly used built-in instructions. Next we will introduce the following built-in instructions:
•v-if command
•v-show command
•v-else command
•v-for command
•v-bind command
•v-on command
Vue.js has good scalability, and we can also develop some custom instructions. Custom instructions will be introduced in later articles.
2.1 v-if directive
v-if is followed by an
expression
<p id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</p>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>Copy after login
Boolean type
The final output here is
<p id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<!---->
<h1>Age: 28</h1>
<!---->
</p>
Copy after login
2.2 v-show
<p id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</p>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>Copy after login
The code here is just v-if changed to v-show
The output is
<p id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<h1 style="display: none;">No!</h1>
<h1>Age: 28</h1>
<h1 style="display: none;">Name: keepfool</h1>
</p>
Copy after login
The difference here is that the v-if above does not directly output the html code. Here, use display:none to hide it
2.3 v-else instruction
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 28,
name: 'keepfool',
sex: 'Male'
}
})
</script>Copy after login
The previous sibling element must have v-if or
v-else-if, the new version of vue.js has added v-else-if. The usage is the same as v-if, but the previous sibling element must have v-if or v-else-if. The old version of v-else is preceded by v-else-if. It can be followed by v-show, but the new version of v-else cannot be preceded by v-show.
2.4 v-for directive
<p v-for="p in people">
<h1>Age: {{ p.age }}</h1>
<h1>Name: {{ p.name }}</h1>
<h1>Sex: {{ p.sex }}</h1>
</p>
<script charset="utf-8" src="js/vue.js"></script>
<script type="text/javascript">
var myModel = {
people:[
{
age: 25,
name: 'keepfool',
sex: 'Male'
},
{
age: 26,
name: 'keepfool2',
sex: 'FeMale'
},
{
age: 27,
name: 'keepfool3',
sex: 'Male2'
}
]
};
var vm = new Vue({
el: '#app',
data: myModel
})
</script>Copy after login
The parent element uses v-for, and the child element can traverse the bound corresponding Array | Object | number | string
v-for can also be used like this:
<p v-for="(item, index) in items"></p>
<p v-for="(val, key) in object"></p>
<p v-for="(val, key, index) in object"></p>
Copy after login
2.5 v-bind command
The v-bind directive can take a parameter after its name, separated by a colon. This parameter is usually an attribute of the
HTML element
<p id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" rel="external nofollow" v-bind:class="activeNumber === n ? 'active' : ''">{{ n }}</a>
</li>
</ul>
</p>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
</script>Copy after login
Another example:
<img v-bind:src="'/path/to/images/' + fileName">
<p v-bind="{ 'id': someProp, 'other-attr': otherProp }"></p>Copy after login
2.6 v-on command
<p id="app">
<p><input type="text" v-model="message"></p>
<p>
<!--click事件直接绑定一个方法-->
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</p>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function() {
// // 方法内 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>Copy after login
2.7 v-model directive
v-model creates two-way data binding on form control elements
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
The above is the detailed content of Summary of common instructions in vue.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
