学习Vue基本使用方法和组件
- 一、基本使用方法
- 1、常用
- 二、组件
- 1、全局组件
- 2、局部组件
- 3、特殊元素特殊对待
- 三、其他
一、基本使用方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><!-- 数据的绑定 --><div id="t1">{{t1_data}}</div><!-- v-bind:不仅可以绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定 --><div id="t2" v-bind:hidden="t2_hidden">{{t2_data}}</div><!-- :hidden和v-bind:hidden="my_hidden"完全等价的一种写法 --><div id="t3" :hidden="t3_hidden">{{t3_data}}</div><!-- 事件绑定 --><!-- 这里的click可以换成任意一个html事件，比如load , doubleclick , mouseon , mousedown这些，不过click肯定是我们最常用的 --><button id="t4" v-on:click="t4Dj">{{t4_data}}</button><!-- 事件绑定 --><!-- v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton" --><button id="t5" @click="t5Dj">{{t5_data}}</button><!-- v-model语法糖实现了vue数据的反向传输 --><div id="t6"><input type="text" v-model="t6_data" /><p> {{t6_data}}</p></div><!-- v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型，因为默认是string类型。 --><div id="t7"><input type="number" v-model.number="oldNum" /><button @click="add">Add</button><p> {{newNun}}</p></div>
</body>
<script src="./demo1.js"></script></html>
var t1Vue = new Vue({el: "#t1",data: {t1_data: "t1_test"}
})var t2Vue = new Vue({el: "#t2",data: {t2_data: "t2_test",t2_hidden: "hidden"}
})var t3Vue = new Vue({el: "#t3",data: {t3_data: "t3_test",t3_hidden: "hidden"}
})var t4Vue = new Vue({el: "#t4",data: {t4_data: "点我一下"},methods: {t4Dj: function () {this.t4_data = "点我干啥"}}
})var t5Vue = new Vue({el: "#t5",data: {t5_data: "点我一下"},methods: {t5Dj: function () {this.t5_data = "点我干啥"}}
})var t6Vue = new Vue({el: "#t6",data: {t6_data: "测试同步文字"}
})var t7Vue = new Vue({el: "#t7",data: {oldNum: 0,newNun: 0},methods: {add: function () {this.newNun = this.newNun + this.oldNum;}}});DOM1(input标签)——>VUE——>DOM2(p标签)
先从用户输入的DOM1获取输入保存在VUE实例，用从VUE实例里拿到数据输出到DOM2
运行这个页面，发现
标签中的内容会随着标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递
1、常用
- 用 new Vue({})新建vue实例
- 使用 v-bind:和{{}}双大括号语法在html中绑定变量
- 使用 v-on: 和 @ 语法绑定函数到标签的事件
- 使用 v-model: 语法使用户的页面输入反向传递回vue实例变量
二、组件
1、全局组件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><div id="app"><my-counter></my-counter></div><button-casdounter></button-casdounter>
</body><script src="./demo.js"></script></html>
定义组件数据（一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝）
//定义一个全局组件
Vue.component('my-counter', {//定义组件数据（一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝）data: function () {return {count: 0,}},//定义组件方法methods: {clickAdd: function () {this.count++;}},template: '<button button @click="clickAdd" > 点击我后数值增加 {{count}}（全局组件） </button > ',})var app = new Vue({el: "#app",
})
上面我们注册的是全局组件，也就是在整个VUE根实例中注册的，也可以理解为调用了VUE的静态方法注册的，这样注册的组件是可以在任何VUE实例中使用的。
2、局部组件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head><body><div id="app"><component-a></component-a></div><div id="app2"><sb></sb></div>
</body>
<script src="./demo2.js"></script></html>
//局部组件一
var componentA = {template: '<div><p>这里是局部组件</p><componentB></componentB></div>',//使用components在父组件中注册局部组件components: {'componentB': {template: '<button>这是一个局部组件</button>'},}
}//局部组件二
//定义componentC组件变量
var componentC = {template: '<button>这是组件C</button>'
}//定义componentD组间变量
var componentD = {template: '<div>这是组件D<component-c></component-c></div>',//自定义名字components: {'component-c': componentC}
}var app = new Vue({el: "#app",components: {'componentA': componentA}
})var app2 = new Vue({el: "#app2",//自定义名字components: {'sb': componentD}
})
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
上面的代码将每个组件的代码赋值给了不同的变量，这样如果某个组件有变化，只用修改相应的变量，而不需要修改所有引用此变量的方法，实现了松耦合的编程思想。
3、特殊元素特殊对待
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
<table><blog-post-row></blog-post-row><!--table元素中只允许包含<th>,<tr>等元素-->
</table>
这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：
<table><tr is="blog-post-row"></tr>
</table>
这样这个自定义组件就会正常渲染。
如果你使用单文件组件的话(就是.vue后缀的文件)，这一条可以忽略
三、其他
VUE是允许用大写字母来注册组件的，但当你使用组件时得在驼峰命名的大写字母间加上”-“并都改为小写，比如myComponent在使用时要换成<my-component></my-component>
Vue.component('todo-item', {// todo-item 组件现在接受一个"prop"，类似于一个自定义 attribute。// 这个 prop 名为 todo。props: ['todo'],template: '<li>{{ todo.text }}</li>'
})接着，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中，即使用v-bind 来动态传递 prop：
<div id="app-7"><ol><!--现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，vue会尽可能的复用之前已经存在的元素，给元素一个唯一的 key，该元素将不会被复用，表示该元素是独立的。--><todo-itemv-for="item in groceryList" <!-- 循环 -->v-bind:todo="item" <!-- 动态传递 prop => ['todo'] -->v-bind:key="item.id" <!-- id 独立元素标识 -->></todo-item></ol>
</div>
