配置webpack及vue脚手架工具：
npm install webpack webpack-cli -g
npm install vue-cli -g
搭建脚手架 vue init webpack 项目文件夹名字
cd 项目文件夹名字
安装脚手架所需的npm包 npm install
在本地服务器运行该项目 npm run dev/npm start
打包上线 npm run build
转译html <span v-html="rawHtml"></span>
v-bind绑定那些后来需要更改的属性:
v-bind:class="{ active: isActive }" v-bind:style v-bind:id v-bind:href 缩写 :href
三元运算符不好使 用这一种格式 :class="{active:index==ins}" 或"{ active: isActive }"
v-bind单项数据绑定 <input v-bind:value="picked">
v-model双向数据绑定 <input v-model="picked">同步更改data里面的picked值(只能运用在表单元素中) v-model相当于value的效果
利用ref获取dom <input type="text" ref="input1"/> this.$refs.input1.value 用ref代替获取dom的消耗,可以获取可以赋值
v-on 指令它用于监听 DOM 事件 v-on:click 缩写@click
对自身使用 @click.stop阻止冒泡 .prevent阻止默认行为
对影响到的父元素使用 .capture捕获(从影响到的节点上的事件从上往下触发) .self当点击自身时才触发
点击时绑定的dom元素 e.currentTarget 点击时直接点击的dom元素 e.target
v-if/v-show条件渲染
<h1 v-if="ok">Yes</h1> <h1 v-else-if="error">B</h1> <h1 v-else>No</h1>
添加一个具有唯一值的 key 属性来表达“这两个元素是完全独立的，不要复用它们”
<input v-if="" placeholder="Enter your username" key="username-input">
<input v-else placeholder="Enter your email address" key="email-input">
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-for循环 <li v-for="item in items">{{item.text}}</li>
vue对象的属性 data(){}数据 computed:{}实时计算data的某个属性 watched:{}当data的某个属性变化执行的函数 methods页面的函数
vue生命周期函数
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
子模板solt的用法 <el-main><slot></slot></el-main> 子模板加入slot就允许在子模板中插入想要的内容
父组件中直接在子模板的中间插入<Header><span>xxxx</span></Header> 内容就显示在slot中了
组件之间的传值
父组件向子组件传值 父组件页面部分引入子组件<Son :val="im value"></Son>
子组件的js部分
数组形式
export default{
data(){},
props:['val']}能直接在页面上用{{val}} 在js中使用this.val
对象形式
props: {
data1: {
type: String,
required: true,
default: 'default value',
validator (value) {
return (value.length < 5)
}},
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}
}
子组件向父组件传值
子组件页面部分<input @change='setVal'></input> 方法部分setVal(){this.$emit('loadVal',this.val)}
父组件页面部分<Son @loadVal="getVal"></Son> 数据部分data(){return name:""} 方法部分getVal(val){this.name=val}
props的双向绑定 在data上新建属性 用watch和props绑定 然后watch监听数值的变化 传给父组件
组件的跳转 <router-link to="/myRegister">注册</router-link>
函数内的跳转 router.go 已经被用来作为 后退/前进导航，router.push 用来导向特殊页面。
跳转：this.$router.push({name: '组件的名字', params: {obj: paicheNo}}) 获取参数：this.$route.params.obj
跳转：this.$router.push({path: '/组件的地址', query: {obj: paicheNo}}) 获取参数：this.$route.query.obj