组件
语法格式如下:
- vue.component(tagName, options)
- <tagName></tagName>
- <div id="app">
- <da></da>
- </div>
- <script>
- // 注册
- Vue.component('da', {
- template: '<h1 > 自定义组件!</h1>'
- })
- // 创建根实例
- new Vue({
- el: '#app'
- })
- </script>
局部组件
- <div id="app">
- <da></da>
- </div>
- <script>
- var Child = {
- template: '<h1 > 自定义组件!</h1>'
- }
- // 创建根实例
- new Vue({
- el: '#app',
- components: {
- // <da> 将只在父模板可用
- 'da': Child
- }
- })
- </script>
父组件的数据需要通过 props 把数据传给子组件
- <div id="app">
- <child message="hello!"></child>
- </div>
- <script>
- Vue.component('child', {
- // 声明 props
- props: ['message'],
- template: '<span>{{ message }}</span>'
- })
- new Vue({
- el: '#app'
- })
- </script>
- <div id="app">
- <child message="hello!"></child>
- </div>
动态 Prop
v-bind 动态绑定 props 的值到父组件的数据中
- div id="app">
- <div>
- <input v-model="parentMsg">
- <br>
- <child v-bind:message="parentMsg"></child>
- </div>
- </div>
- <script>
- // 注册
- Vue.component('child', {
- // 声明 props
- props: ['message'],
- // 同样也可以在 vm 实例中像 "this.message" 这样使用
- template: '<span>{{ message }}</span>'
- })
- // 创建根实例
- new Vue({
- el: '#app',
- data: {
- parentMsg: '父组件内容'
- }
- })
- </script>
- <div id="app">
- <ol>
- <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
- </ol>
- </div>
- <script>
- Vue.component('todo-item', {
- props: ['todo'],
- template: '<li>{{ todo.text }}</li>'
- })
- new Vue({
- el: '#app',
- data: {
- sites: [
- { text: 'Runoob' },
- { text: 'Google' },
- { text: 'Taobao' }
- ]
- }
- })
- </script>
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
自定义指令
image.PNG
- <div id="app">
- <p > 页面载入时, input 元素自动获取焦点:</p>
- <input v-focus>
- </div>
- <script>
- // 注册一个全局自定义指令 v-focus
- Vue.directive('focus', {
- // 当绑定元素插入到 DOM 中.
- inserted: function (el) {
- // 聚焦元素
- el.focus()
- }
- })
- // 创建根实例
- new Vue({
- el: '#app'
- })
- </script>
image.PNG
image.PNG
路由
vue.js 路由允许我们通过不同的 URL 访问不同的内容.
Vue.JS + vue-router 可以很简单的实现单页应用.
<router-link> 是一个组件, 该组件用于设置一个导航链接, 切换不同 html 内容. to 属性为目标地址, 即要显示的内容.
混入 (mixins) 定义了一部分可复用的方法或者计算属性.
- var vm = new Vue({
- el: '#databinding',
- data: {
- },
- methods : {
- },
- });
- // 定义一个混入对象
- var myMixin = {
- created: function () {
- this.startmixin()
- },
- methods: {
- startmixin: function () {
- document.write("欢迎来到混入实例");
- }
- }
- };
- var Component = Vue.extend({
- mixins: [myMixin]
- })
- var component = new Component();
选项合并
- var mixin = {
- created: function () {
- document.write('混入调用' + '<br>')
- }
- }
- new Vue({
- mixins: [mixin],
- created: function () {
- document.write('组件调用' + '<br>')
- }
- });
混入调用
组件调用
Vue 实例优先级会较高
- var mixin = {
- methods: {
- hellworld: function () {
- document.write('HelloWorld 方法' + '<br>');
- },
- samemethod: function () {
- document.write('Mixin: 相同方法名' + '<br>');
- }
- }
- };
- var vm = new Vue({
- mixins: [mixin],
- methods: {
- start: function () {
- document.write('start 方法' + '<br>');
- },
- samemethod: function () {
- document.write('Main: 相同方法名' + '<br>');
- }
- }
- });
- vm.hellworld();
- vm.start();
- vm.samemethod();
输出结果为:
HelloWorld 方法
start 方法
Main: 相同方法名
Vue 可以添加数据动态响应接口.
- <div id = "app">
- <p style = "font-size:25px;"> 计数器: {{ counter }}</p>
- <button @click = "counter++" style = "font-size:25px;"> 点我 </button>
- </div>
- <script type = "text/javascript">
- var vm = new Vue({
- el: '#app',
- data: {
- counter: 1
- }
- });
- vm.$watch('counter', function(nval, oval) {
- alert('计数器值的变化 :' + oval + '变为' + nval + '!');
- });
- setTimeout(
- function(){
- vm.counter += 20;
- },10000
- );
- </script>
- Vue.set( target, key, value )
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/b90af8efc22f