1. Understanding of MVVM
The full name of MVVM is Model-View-ViewModel
Model represents a data model. Data and business logic are defined in the Model layer; it generally refers to various business logic processing and data manipulation performed on the back-end, and for the front-end it is the api interface provided by the back-end. View represents the UI view and is responsible for the display of data; the view layer is the user interface. The front end is mainly constructed by HTML and CSS. ViewModel is responsible for monitoring data changes in the Model and controlling the update of the view, processing user interaction operations;
Vue is data driven in, the Vue itself DOM and data binding, once created bindings, DOM, and data will be synchronized, each when data changes, changes in DOM will follow . ViewModel is the core of Vue, it is an instance of Vue. The HTML element on a certain HTML element in the scope of the Vue instance can be the body or the element referred to by a certain id.
Two, vue common instructions
1. v-text v-text is mainly used to update textContent, which can be equivalent to the text attribute of JS.
<span v-text="name"></span>
or
<span>Interpolation expression {{name}}</span>
2. v-html is equivalent to the innerHtml attribute of JS
<div v-html="content"></div>
3. v-cloak is used to keep on the element until the end of the associated instance to compile to solve the flicker problem
<div id="app" v-cloak>
<div>
{{msg}}
</div>
</div>
<script type="text/javascript">
new Vue ({
from: '# app',
data:{
msg:'hello world'
}
})
</script>
Normally, it will flicker when the page loads, and display first:
<div>
{{msg}}
</div>
Only displayed after compilation:
<div> hello world! </div>
You can use the v-cloak command to solve the flickering problem of the interpolation expression, and use the attribute selector in the css to set the v-cloak to display: none;
4. The instance associated with v-once v-once will only be rendered once. After re-rendering, the instance and all its child nodes will be regarded as static content skipped, which can be used to optimize update performance
<span v-once>This will never change:{{msg}}</span> //Single element
<div v-once>//There are child elements
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
In the above example, even if msg and list are changed, they will not be re-rendered.
5. v-if v-if can achieve conditional rendering, Vue will render elements according to the true and false conditions of the value of the expression
<a v-if="true">show</a>
6. v-else v-else is used with v-if, it must follow v-if or v-else-if immediately, otherwise it will not work
<a v-if="true">show</a> <a v-else>hide</a>
7. v-else-if v-else-if acts as the else-if block of v-if, which can be used multiple times in a chain. The switch statement can be implemented more conveniently.
<div v-if="type==='A'"> A </div> <div v-else-if="type==='B'"> B </div> <div v-else-if="type==='C'"> C </div> <div v-else> Not A,B,C </div>
8. v-show is also used to display elements based on conditions. Unlike v-if, if the value of v-if is false, the element is destroyed and not in dom. But the elements of v-show will always be rendered and saved in the dom. It simply switches the dispaly attribute of css.
<span v-show="true">hello world</span >
Note: v-if has a higher switching cost and v-show has a higher initial rendering cost. Therefore, if you want to switch very frequently, v-show is better; if the conditions are unlikely to change during runtime, v-if is better
9. v-for uses the v-for instruction to render according to the traversal array
<div v-for="(item,index) in items"></div> //Use in, index is an optional parameter, indicating the index of the current item
10. v-bind v-bind is used to dynamically bind one or more features. When there are no parameters, it can be bound to an object containing key-value pairs. Often used to dynamically bind class and style. And href etc. Abbreviated as a colon [:]
<div id="app">
<div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
var app = new Vue ({
from: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
After compilation
<div class = "is-active"></div>
11. v-model is used to create two-way data binding on the form
<div id="app">
<input v-model="name">
<p>hello {{name}}</p>
</div>
<script>
var app = new Vue ({
from: '#app',
data: {
name:'Akari'
}
})
</script>
The model modifiers are
.lazy (resynchronize in the change event)> v-model.lazy .number (automatically convert the user's input value into a numeric type)> v-model.number .trim (automatically filter the leading and trailing spaces of the user's input)> v-model .trim
12. v-on v-on is mainly used to monitor dom events in order to execute some code blocks. The expression can be a method name. Abbreviated as: [@]
<div id="app">
<button @click="consoleLog"></button>
</div>
<script>
var app = new Vue ({
from: '#app',
methods:{
consoleLog:function (event) {
console.log(1)
}
}
})
</script>
Event modifier
.stop prevents the event from continuing to propagate. The prevent event no longer reloads the page. capture uses the event capture mode, that is, the event triggered by the element itself is processed here, and then it is processed by the internal element. self only when event.target is The processing function is triggered when the current element itself. The once event will only be triggered once. Passive tells the browser that you don't want to prevent the default behavior of the event
3. What is the difference between v-if and v-show?
Common point: both v-if and v-show can display and hide elements
the difference:
1. v-show is just a simple control element’s display property and v-if is conditional rendering (the condition is true, the element will be rendered, if the condition is false, the element will be destroyed) 2. v-show has a higher The first rendering cost, while the first rendering cost of v-if is much smaller. 3. v-if has higher switching cost, and v-show switching cost is lower. 4. v-if has matching v-else-if and v- else, and v-show does not have 5. v-if can be used with template, but v-show cannot
Fourth, how to make CSS only work in the current component?
Add the component style to scoped
<style scoped> ... </style>
5. What is the role of keep-alive?
When keep-alive wraps dynamic components, inactive component instances will be cached, which is mainly used to preserve component state or avoid re-rendering.
6. Steps to use plugins in Vue
1. Use ES6's import… from… syntax or CommonJSd’s require() method to introduce plugins. 2. Use the global method Vue.use( plugin) to use plugins, and you can pass in an option object Vue.use(MyPlugin, {someOption: true} )
Seven, Vue life cycle
8. What are the ways to communicate between Vue components
The communication between Vue components only refers to the following three types of communication: parent-child component communication, inter-generation component communication, brother component communication
Nine, the difference between computed and watch and the application scenarios
computed: It is a calculated attribute, which depends on other attribute values, and the computed value is cached, and only the attribute value it depends on changes. The computed value will be recalculated the next time the computed value is obtained watch: More of the function of "observation", similar to the monitoring callback of some data, each time the monitored data changes, the callback will be executed for subsequent operations Application scenarios: When we need to perform numerical calculations and rely on other data, we should use computed When we need to perform asynchronous or expensive operations when the data changes, we should use watch
Ten, there are several vue-router routing modes
Hash : Use the hash value of the URL as a route. Support all browsers.
History : Since the HTML5 History API and server configuration. Refer to the HTML5 History mode in the official website
Abstract : Support all javascript operation modes. If it is found that there is no browser API, the route will automatically be forced into this mode.
11. Understanding of SPA single page, what are its advantages and disadvantages
SPA (single-page application) only loads the corresponding HTML, JavaScript and CSS when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page due to user operations. Instead, it uses the routing mechanism to implement HTML Content transformation, UI and user interaction, avoiding page reloading Advantages:
1. The user experience is good and fast. The content change does not need to reload the entire page, avoiding unnecessary jumps and repeated rendering. 2. Based on the above point, SPA is relatively less stressful on the server 3. Separation of front-end and back-end responsibilities, clear structure, The front end carries out the interaction logic, and the back end is responsible for data processing
Disadvantages:
1. The initial loading is time-consuming: In order to realize the single-page Web application function and display effect, JavaScript and CSS need to be loaded uniformly when the page is loaded, and some pages are loaded on demand. 2. Forward and backward routing management: Because a single page is applied in one All the content is displayed on the page, so the browser’s forward and backward functions cannot be used. All page switching needs to build stack management by yourself. 3. SEO is more difficult: Since all content is dynamically replaced and displayed in one page, it is in SEO. It has natural weaknesses