The basic syntax of VUE
                <script src="vue.js"></script>
                <div id="app">

		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {

				}
			})
		</script>
Copy the code

Four common options for VUE

The filter filter

Filters actually intercept Web resources, do some processing and then pass to the next filter or servlet for processing, usually used to intercept requests for processing, can also intercept the response returned
Grammar 1: {{message | filterA | filterB}}Copy the code
In this example, 'filterA' is defined as a filter function that receives a single argument, and the value of the expression 'message' is passed into the function as an argument. It then proceeds to call the filter function 'filterB', which is also defined to receive a single argument, passing the result of 'filterA' to 'filterB'.Copy the code
Message is passed as an argument to the filterA function, and the return value of the filterA function is passed as an argument to the filterB function. The result is returned by filterB.
Syntax 2: {{message | filterA (arg1, arg2)}}Copy the code
Here, 'filterA' is defined as a filter function that takes three arguments. The value of 'message' takes the first argument, the plain string 'arg1' takes the second argument, and the expression 'arg2' takes the third argument.Copy the code
Grammar 3 {{a, b, | filter}}Copy the code
{{a,b,|filter}}

filters:{ filter:function(value1,value2){

return value1 + value2

}
},
Copy the code
Computed computing
Getters for computed properties are side effect-free, making them easier to test and understand, and computed properties are cached based on their reactive dependencies
Application of sum
{{sum}} </div> <script type="text/javascript"> let vm = new Vue({// mount element el: '#app', // instance vm data: {num1:1, num2:3, num3:6}, // Calculate attributes computed: {// sum:function(){//sum=()=>{// Cannot use arrow function sum() {return this.num1 + this.num2 + this.num3}}}) </script>Copy the code
Method the methods
Basic usage
Let vm = new Vue({methods:{method name :{}}})Copy the code
Application of accumulation
<div id="app"> <button V-on :click="add"> </button> <div > <script type="text/javascript"> "#app", data: { a: 0 }, methods:{ add(){ this.a++ } } }) </script>Copy the code
Watch [console]
Let vm=new Vue({el:'#app', data:{}, // Watch :{a(){console.log(' +this.a)}})Copy the code
Differences between computed, Methods and Watch
Differences between computed attributes and Watch Watch is better used when data needs to change asynchronously or when it is expensive to perform updates. Computed does not work asynchronously; For computed data, you can get data from the cache, while for watch, you run the function every time, regardless of whether the value of the variable changes. For computed data, you can directly read the last value when the value does not change
In a template file, computed attributes need only be {{reverseMessage}}, while methods need to be {{reverseMessage()}}, The most obvious difference is that methods are methods that need to be executed. Computed attributes are re-executed only when the dependent data changes, otherwise the value in the cache is used. Methods are executed every time a page is entered, and some methods need to be executed every time a page is entered. However, computed attributes are more economical
conclusion
1. For computed invocation, there is no need to add (), while for methods invocation, parentheses () and names are required
2. Different ways to reside in memory Computed has the function of caching. Related attributes remain in memory and can be invoked multiple times on the page without needing to be reloaded. Methods Methods Need to be reloaded every time you enter [refresh] the page. Use Methods every time you do need to reload and no caching is required.
3. Watch has a single dependency, and it can only monitor one variable at a time, usually using the console to monitor variables