VUE
Vue (pronunciation / vju ː /, similar to view) is a set of progressive JavaScript framework for building user interface. Unlike other large frameworks, Vue is designed for bottom-up, layer by layer applications. Vue's core library only focuses on visual layers, which facilitates integration with third-party libraries or existing projects
Article directory
1, the constructor.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Test case</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="vue_det"> <h1>site : {{site}}</h1> // {{}} interpolation expression <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ // Each Vue is to be instantiated el: '#vue_det', //Get the id element Vue? Det data: { //data definition properties site: "test", url: "www.run.com", alexa: "10000" }, methods: { //methods defining functions details() { return this.site + " Vue"; } } }) </script> </body> </html> //Test code source rookie tutorial
2,v- directive
v-text v-html
<p v-text="msg">It's cloudy today</p> //replace text <p v-html="strHtml"></p> //Support for html tags
v-if (add or remove) v-show (show and hide)
Pass the value of boolean type (true,false)
Redraw reflow
<p v-if="isShow">I am v-if</p> //isshow:false <p v-show="isShow">I am v-show</p> //isshow:false
**v-bind **
Bind variable value to property
<!-- Complete grammar --> <a v-bind:href="url"></a> <!-- Abbreviation --> <a :href="url"></a>
<p :class="{box1:isShow,box2:isShow}"></p> //bool type control display <p :class="[a,b]"></p> //Direct display
style binding (will overwrite)
<p :style="{color:a,fontSize:b}">1234567u</p> <p :style="[aa,bb]">127u</p>
v-model
Two way data binding
<p @click="fn">Corresponding to vue Instance data Container acceptance in</p> <input type="text" v-model="str"> methods:{ fn(){ console.log(this.str); this.str += '★'; } }
**v-on **
<!-- Complete grammar --> <a v-on:click="doSomething"></a> <!-- Abbreviation --> <a @click="doSomething"></a>
v-once
Events are loaded only once
3. Block default events
Event modifier
. prevent (event.preventDefault()) block default events
. once only triggers a callback once
<button @click.once="fn3">Point me</button> //Trigger only once <a href="http://www.baidu.com" @click.prevent="fn3">Point me2</a> //Stop the original jump
4. Event object
Event object
<button @click="fn3($event)">Point me1234567</button> <button @click="fn3">Point me123</button> // fn3(e){ // console.log(e) // }
5,v-for
array
Syntax: item in items (item of items source)
<ul> <li v-for=" item in items">{{item.name}}</li> //Three lines Li ZS, LS, w2m <li v-for="item of arr">{{item}}</li> //Three lines Li a, B, C <li v-for=" (item,index) in items"> //Three lines with index 1 --- ZS, 2 --- ls, 3 --- w2m {{index}} ----- {{item.name}} </li> </ul> <script> new Vue ({ arr:['a','b','c'], items:[ { name:'zs' }, { name:'ls' }, { name:'w2m' }], }) <script>
object
<ul> <li v-for=" (value,key,index) in items"> {{index}} --- {{key}} --- {{value}} //1---name---zs,2---age---11,3---job---coder </li> </ul> items:{ name:'zs', //Creating an object in the vue constructor age:11, job:'coder' },
:key(v-bind:key)
Make sure the rendered elements are reused,
v-for //: key attribute is very important in interview question scenario: changes in the list data will cause the view to be updated again. In order to improve the performance, it is convenient to update <li v-for=" (value,key,index) in items" :key="index"> {{index}} --- {{key}} --- {{value}} </li>
6. Flash screen v-clock
In css, add:
[v-cloak] { display: none; }
Then add v-clock to the loading point in html to solve this problem
<div id="app" v-cloak> {{msg}} </div>
7. filter
Local filter
let vm1 = new Vue({ el:"#app", data:{ msg:"opqrst" }, methods:{}, filters:{ //Definition in vue 'aaa':function (value) { return value.charAt(0).toUpperCase()+value.substr(1)//Return initial capital }, } }) ``` **usage** ```javascript <div id="app"> {{msg | aaa}} </div>
Global filtering
Vue.filter('ccc',function (value) { //Setting up a filter on vue return value.toUpperCase() }); let vm2 = new Vue({ el:"#app2", data:{ msg:'hello' } })
Filters can be used on v-bind
<div v-bind:id="'666' | f1('★')">66</div> //Bind 666 ★ on the id Vue.filter('f1',function (value,yuan) { return value + yuan; });
8. Ref takes dom element
We can call the element by binding to the ref specific attribute
<input type="text" ref="username" id="sr">// Create a ref named username <button @click="getVal">click</button> let vm = new Vue({ el: '#app', methods: { getVal() { console.log(this.$refs.username.value)//Output what you typed console.log(this.$refs) //username:input#sr } } })
9. Custom instruction
Overall situation
<div id="app"> <input type="text" v-focus> </div> //Ellipsis part Vue.directive('focus',{ inserted(dom){ //Who to add to dom.focus();//Get focus automatically } }) new Vue({ el: '#app', data: { } })
local
new Vue({ el:'#app', data:{ }, directives:{ //Let's put the directives in the vue 'focus':{ inserted(dom) { dom.focus(); } } } })
10. Calculation properties
Main functions to make up for the shortcomings of v-model
<div id="app"> <input type="text" v-model="msg"> <p>{{fn}}</p> </div> new Vue({ el: '#app', data: { msg: 'hello' }, methods: { }, computed: { fn: function () { return this.msg+'*' //The model is output as is, and the calculation attribute can subdivide the operation } } })
