vue简介
2019-07-09 本文已影响0人
上山走18398
简述
1. Virtual DOM
instead a replica of the DOM is created which is present in the form of javascript data structure
Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure.
the final changes are then updated to the real DOM
Virtual DOM vs Real DOM : compared updated
2. Data Binding
HTML attributes style classes
v-bind
3. Components
custom elements can be reused in HTML
4. Event Handing
v-on : is the attribute added to the DOM elements to listen to the events in VueJs
5. Animation/Transition
6. Computed Properties
It helps to listen to the changes made to the UI elements and performs the necessary calculations ***
7. Templates
8. Directives
v-if v-else v-show v-on v-bind v-model
9. Watchers
are applied to data that changes
10. Routing
11. Vue-CLI
与其他框架对比：
virtual dom --改动--对比真实的dom--更新改动到真实的dom，这样更快？
<h1 v-if = "show">This is h1 tag</h1><h1 v-if = "show">This is h1 tag</h1>
Vue 语法
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
var vm = new Vue({
el:"#vue_id" //操作元素的id
data:{
"key1":value1,
"key2":value2,
.........,
"keyN":"valueN" //响应交互的数据
--------
htmlconent: xxxxxx -> <div v-html = "htmlcontent"> </div> v-html 表示添加html内容
imgsrc:"xxx.jpg" -> {{imgsrc}} or v-bind:src = "imgsrc" //v-bind绑定属性就能修改
},
component:{
"testcomponent":{
template:"<div><h1>.....</h1></div>"
} //这种component的定义方式称为local registration
}
methods:{
funcname:function(){
return xxxx
}
}
computed:{ //computed properties This means everytime it is called, the last value is updated for all，每次调用，在所有调用的地方都更新
data:{c:2}
Type:function(){
return c;
}
Type:{
get:function(){
}
set:function(){ //<input type = "text" v-model = "fullname" />
}
}
}
watch : { //监视一个改变，另一个也改变
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
} //Kilometers : <input type = "text" v-model = "kilometers">
//Meters : <input type = "text" v-model = "meters">
</div>
})
//must use function when in vue.extend
var Component = Vue.extend({
data:function(){
}
})
var myComponentInstance = new Component(); //从component这里获得data，必须实例化
创建一个component
Vue.component('nameofthecomponent',{//options});
Components
语法：Vue.component('nameofthecomponent',{ // options});
....
<div id='xxx'>
<testcomponent><testcomponent>
....
创建一个component
Vue.component('testcomponent',{template:'<div>...'}); //component创建之后就变成了一个custom element，通过vue实例添加进html中
也可以直接在html中添加
eg.1
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
----------------------------------
Dynamic Components
<component></component> //通过component关键字标识
语法：<component v-bind:is = "view"></component>
eg.1
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1' //
},
components: {
'component1': { //
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>
VueJS - Watch Property
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
常用指令：
v-bind
v-model
v-on : listen to the events v-on:click | @click
v-on:event.once:只调用一次
v-on:event.prevent: 弹出警告，不再打开link（href指定的）否则弹出警告，然后跳转指定链接
v-on:keyup.enter
V-on.keyup.ctrl.enter
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp">
</button-counter>
v-if
v-for
v-show
Rendering
condition rendering
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}} </li>
</ul>
list rendering
Transition&Animation
语法：
<transition name = "nameoftransition">
<div></div>
</transition>
VueJS - Directives
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})
//创建一个custom directives
<div id = "databinding">
<input v-model = "name" placeholder = "Enter Name" /><br/>
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
</div>
filters : {
countletters : function(value) {
return value.length;
}
}
Routing
VueJS does not have a built-in router feauture. We need to follow some additional steps to install it.
