Quick start with Vue
-
Preface
For a novice who is new to programming, the syntax of JavaScript tends to be complicated. Choosing the Vue library can be said to be a relatively good experience. In many ways, Vue simplifies the JavaScript grammar, and realizes the data and viewTwo-way binding,achieveResponsiveThe purpose of the page.
The blogger is a sophomore programming novice. The following content is his own understanding of Vue. The purpose of writing this blog is to consolidate your basic knowledge of Vue. You can watch it as a kind of notes. If you can give It is a great honor for my friends from Vue school to help, and I hope everyone will be correct in the areas where there are many inappropriate expressions and logical errors.
Reference material: "Vue.js from entry to practice"
1. Vue examples and template syntax
<body>
<div id="app">
<p>{
{
message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello,word!'
},
methods:{
},
})
</script>
</body>
- the
Vue syntax is written in script like JavaScript , and DOM is bound by id selector . In Vue , you only need to mount the id of DOM in el , which can be simply understood ashook, El hooks all the content in the <div> through the feature of id="app", so that we can implement operations in the DOM in Vue .
- data
The data in Vue is used to declare the data we want to use. This operation helps us to more easily clarify the data that needs to be modified in a certain section when we maintain or operate the document, and there is no need to directly manipulate the DOM . At this time The data and the DOM are two-way binding, when we modify the data declared in the data, the DOM will also happen at the same timeResponsiveThe change.
- methods
What methods contain is our entirelogicAnd the trigger in the pageevent, The content is equivalent to the function content in JavaScript
2. Built-in instructions
There are many built -in instructions in Vue. These instructions replace the document and event operations in JavaScript .
- v-html
v-html: Convert the data tohtml tagformUpdate
<body>
<div id="app">
<p>{
{
website}}</p>
<p v-html="message">{
{
website}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
website:'Vue,js',
message:'<h1>hello,word!</h1>'
},
methods:{
},
})
</script>
</body>
It can be found that the Vue.js bound in the second <p> tag is hello, word! Updated and passed in the declared message '<h1>hello,word!<\h1>'html tag updateAfter reading the content, I saw that this is a first-level title of hello, word! .
- v-text
<body>
<div id="app">
<p>{
{
website}}</p>
<p v-text="message">{
{
website}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
website:'Vue,js',
message:'<h1>hello,word!</h1>'
},
methods:{
},
})
</script>
</body>
Through the v-txet instruction, although the content in the <p> tag is still replaced, but only throughStringIs displayed instead of passing through like htmlhtml tagIn the form of display.
- v-cloak
When the code is loaded, the HTML is loaded first, and the interpolation syntax is loaded on the page as HTML content. After the js is loaded, the interpolation syntax is replaced, so we will see the flicker problem, and v-clock can solve this problem.
<div v-cloak>{
{
msg}}</div>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
- v-once
The v-once instruction only renders elements and components once, and subsequent rendering, elements, components and all of their child nodes that use this instruction will be treated as static content and skipped. This can be used to optimize update performance.
<body>
<div id="app">
<p v-once>can not change:{
{
website}}</p>
<p>change: {
{
website}}</p>
<p ><input type="text" v-model = "website"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
website:"hello"
},
methods:{
},
})
</script>
</body>
- v-on
For Vue event binding, use the built-in v-on instruction to complete and pass parameters.
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="alert"> //@click="alert"
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
alert:function() {
alert('触发了点击事件');
}
},
})
</script>
</body>
In the v-on: click the back to add a click event named alert methods, before I tried to direct the use of v-on: click = "alert ( 'triggered the click event')," but after a clickConsole error, I don’t know if there is a great god who understands why it is like this.
When using the v-on instruction, not only click events can be triggered, such as double-click events and keyboard click events, etc., only need to modify v-on:click or (mousedown, mouseup, etc.) , and we canv-on:click is abbreviated as @click, The method to trigger the event must be written in methods .
- v-if
v-if and v-show can achieve conditional rendering, and Vue will render elements according to the true and false conditions of the expression value. There are also v-else and v-else-if commands that can be matched with v-if, similar to if-else and if-elseif-elseif in JavaScript.
To put it simply, v-if is equivalent to our conditional operation on the DOM in JavaScript. According to the true or false expression value, we can perform conditional operation on the DOM. Let's take a look at how to operate it.
<body>
<div id="app">
<input type="button" value="切换" @click="go">
<p v-if="jump">我跳出来拉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
jump:false
},
methods:{
go:function(){
this.jump=!this.jump;
}
},
})
</script>
</body>
Note that the v-ifThe default boolean value is false, And v-if is directly onJUDGMENTOperation, and the subsequent v-show is rightstyleOperation.
- v-show
The usage of v-show is roughly the same as v-if. The difference is that elements with v-show will always be rendered and kept in the DOM. v-show simply switches the element’s CSS property display, when the template property is true When the console displays display:block; when the attribute value is false, the console displays display:none.
v-show does not support the <tempalte> syntax, nor does it support v-else.
<body>
<div id="app">
<input type="button" value="切换" @click="go">
<p v-show="jump">我跳出来拉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
jump:false
},
methods:{
go:function(){
this.jump=!this.jump;
}
},
})
</script>
</body>
The difference between v-show and v-if
- All are based on the true or false of the expression to determine the element display and hide
- v-if only renders the element when the condition is true, and v-show will always render the element regardless of the initial condition.
- The initial cost of v-show is higher, and the switching cost of v-if is higher
- Use v-show when switching frequently; use v-if when operating conditions rarely change
- v-for
In Vue, the v-for instruction is provided to loop data.
<body>
<div id="app">
<h>开始循环</h>
<li v-for="index in item"> //index用于遍历item中的所有元素
{
{
index}}
</li>
</div>
<script>
new Vue({
el:'#app',
data:{
item:[1,2,3,4,5],
},
methods:{
},
})
</script>
</body>
<body>
<div id="app">
<h>开始循环</h>
<li v-for="(index,items) in item">//index表示数组中的元素，items表实元素的下标
{
{
index}},{
{
items}}
</li>
</div>
<script>
new Vue({
el:'#app',
data:{
item:[1,2,3,4,5],
},
methods:{
},
})
</script>
</body>
You can use of instead of in as the delimiter, because it is closer to the syntax of JavaScript iterators
<div v-for="index in items">
- The
most important thing about v-model is two-way data binding . When using Vue to manipulate DOM elements, the view and data change at the same time according to either side.
<body>
<div id="app">
输入内容：<input type="text" v-model="message"><br/> <!--v-model绑定了输入框与message中的内容-->
反转内容：{
{
reversedMessage}}
</div>
<script>
new Vue({
el:'#app',
data:{
message:''
},
computed:{
//计算属性在computed选项中定义，当计算属性所依赖的值发生变化时，这个属性的值会自动更新
//computed可以换做methods定义一个方法实现相同的功能
reversedMessage: function(){
return this.message.split('').reverse().join('') //选中message中的内容，反转后添加
}
}
})
</script>
</body>
When we enter a value in the input input box, the boundmessageThe attribute value has also changed. When the binding is successful, any valid string or number we input in the input will be updated by Vue.messageAttribute value to match the value we entered, and then passreversedMessageMethod willmessageRe-print it upside down in =={ {reversedMessage}}==, because it is a two-way data binding , the three occur at the same time.
- v-bind
The function of v-bind is to bind attributes to elements, written v-bind: attribute name, which can be abbreviated as ":attribute name".
<body>
<div id="app">
<img :src="imgsrc" :title="imgtitle">
</div>
<script>
new Vue({
el:'#app',
data:{
imgsrc:"xxx",
imgtitle:"获得图片",
},
methods:{
},
})
</script>
</body>
Whether it’s class or other tags, you can pass ": Tag name"To bind attributes to the element. The content of the bound element is used as a JavaScript variable, so JavaScript expressions can be written on it.
3. Concluding remarks There is
a long way to go to learn programming. If you think it's good, please like and share it. Thank you for watching.