vue项目

初始化项目

nodejs 使用npm install vue-cli vue init webpack 项目名称构建项目

变量

var vm = new vue({ el:“元素id”，修改dom为vue对象 data:数据（用vm.数据访问，vm自身数据用vm.$el访问）， computed:{name:{}}属性， watch：{a:function}监视变量值 }) html中{{}}添加表达式，v-if不需要

指令

html标签语句中 v-if、v-for 、v-bind(显示更新属性数据)、v-on:click、v-model(双向绑定)等 自定义指令

Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

组件

• 全局组件

Vue.component('runoob', {
a: '<h1>自定义组件!</h1>'
props："text"自定义属性
})

• 局部组件

new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': {a: '<h1>自定义组件!</h1>'}
}

• 单文件组件 *.vue文件时vue的单文件组件，包含template、script、style三块，通过vue-loader（基于webpack）解析文件 vue组件库element

webpack(js模块打包)

webpack项目的基本配置,可以通过npm install webpack-cli命令后， webpack --config webpack.config.js生成配置文件 webpack-demo |-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webpack配置文件 （entry指定要处理的文件入口，output指定输出文件bundle） |-.babelrc Babel配置文件 四个重要组成部分，entry、output、moudle（明确loader）、plugins

输入js输出js

路由

<router-link>导航链接