Vue快速入门

 

一、创建vue实例

 

new Vue({
 el: '#html的class',
 data: {
   message: 'Hello Vue!' //html可以通过{{ message }}取，如<p>{{ message }}</p>
 }，                                //v-model="
 methods: {
   reverseMessage: function () { //html可以通过v-on:click监听点击事件调用
     this.message = this.message.split('').reverse().join('')
   }
 }
})

 

二、组件

html中引用
<script src="content/js/main/lib/sea.js" type="text/javascript"></script>
<script src="content/js/main/lib/seajs-css.js" type="text/javascript"></script>
<script src="content/js/main/config/config.js" type="text/javascript"></script>
<script src="content/js/main/lib/seajs-text.js" type="text/javascript"></script>
config.js
seajs.config({
base: '',// 配置Sea.js 的基础路径
alias: {//引用其他js，并取别名
'vue': 'content/js/main/lib/vue',
'routes': 'content/js/main/router/routes',
'vue-router': 'content/js/main/lib/vue-router',
'user': 'content/js/page/system/user',
'user_add': 'content/js/page/system/sub/user_add'
}
charset: 'utf-8'//配置编码格式

routes.js
define(function(require, exports, module) {//seajs三个对象
require('user');//引入user.js
var routes = [      //用于vue-router.js(配置js跟component关系)

        // 智能算法管理相关路由
        {
            path:'/user_add',
            component: Vue.component('user-add'),//相当于在父组件中添加一个user-add标签
        },
        {
            path:'/user',
            component: Vue.component('user-List'),
            children: [
                {
                    path: '/user/edit', component: Vue.component('operator-grid'),
                }
            ]
        }]
 var module_uri = module.uri;//module存放当前模块的变量函数        
exports.routes = routes;// 导出此路由配置，取名routes
}
<router-view></router-view>在components-demo标签中添加标签new Vue时自动加载routes.js里面配置的组件，components-demo不是组件，是所有组件的父标签
var routes = require('routes');//在new Vue({ el: '#components-demo' })前引入router.js

vue.js
define(function(require, exports, module) {//seajs
    var tpl = require('.html?v=0.0.1');// 引入模版
    var children = require('children_build');//引入子组件
     // 注册组件，取名user-List，在routes中引用映射或在tpl父组件中引用映射
    Vue.component('user-List', {
      data: function () {//必须时函数，以便复用不影响
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
       // 定义普通方法
     methods: {
          functionName: function () {
        }     
    }
    })
})
<div id="components-demo">
  <user-List></user-List>
  <user-List></user-List> 组件可以被复用而且互不影响
</div>
new Vue({ el: '#components-demo' });

 

三、Vue常用指令

使用方式： 指令：参数="预期值'

v-bind：

  参数：title，class。

  预期值：可以vue date变量加减等运算，也可以调方法。

    (1)通过js动态设置style、class，如<div class="static" v-bind:class="{ active: isActive}"></div>isActive是被渲染的
                data，有true、false两个值，为true时在原class上添加一个active；
                <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>。

 

     (2)把父组件的动态元素传给子组件(子组件不能改变)，<add v-bind:子组件props命名="父组件的data属性"/>如果值是字符串并
                且是静态的不需要使用v-bind。经常会在父页面弹出子页面，子页面使用父页面的form元素时使用，只需要在子组件中
                添加props:['子组件命名']。
props: ['subInfo'],
// 定义数据部分
data: function () {
  return {
      toSubInfo: {
      。。。
      },
  }
},
<user-List v-bind:sub-info="toSubInfo" ></user-List>
v-on ：当子组件需要调用定义在父组件中的方法时使用。<find v-on:子组件命名="父组件的方法"/> 子组件通过调用this.$emit('子
            组件命名',参数)调用父组件方法,或者v-on:click="$emit('enlarge-text'，参数)"。
   v-on:click监听点击事件，也可用@click

Vue常用实例

Vue帮助文档