配置webpack及vue脚手架工具:
vue-cli 2
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
vue-cli 3.0 ---需要nodejs>=8.9
npm uninstall vue-cli -g
npm/cnpm install -g @vue/cli 查看vue是不是>=3.0
vue create 项目文件夹名字
cd 项目文件夹名字
运行本地 npm run serve
打包上线 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 }"
绑定多个class用逗号隔开 { 'active' : isActive == ins, 'selected' : abc == ccc }
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="Math.random() > 0.5">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" :key= "index"> {{item.text}} </li> <li v-for="(item,index) in items">{{item.text}}</li>
下面的元素的使用:显示字符串用 {{item.xxx}} 显示src、class用 :src="item.xxx" 显示value用 v-model="item.xxx"
vue对象的属性 data(){}数据 computed:{}实时计算data的某个属性 watch:{}当data的某个属性变化执行的函数 methods页面的函数
watch:{
data(val, newval) {
console.log(val,newval)
}
data: {
handler(newVal) {
do something
},
deep: true
}
data: 'changeData' // 值可以为methods的方法名
immediate和handler
这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。
每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化
'data.doc_id': {
handler(newVal, oldVal) {
......
},
deep: true
}
}
vue生命周期函数
beforeCreate
- 在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前调用,里面的this指向实例
created
- 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置;数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,还未与页面关联起来,$el属性目前不可见。可在这阶段进行一些初始化的操作(如ajax获取数据之类的)
beforeMount
- 在挂载之前没调用,解析模板,把实例对象下的$el属性指向设置中的el参数指定的元素,这个解析后的模板还没有和$el进行绑定
mounted
- 挂载之后调用,把解析后的模板与页面元素进行绑定,用解析后的模板内容替换页面
beforeUpdate
- 在数据绑定之前被调用
updated
- 在数据改变之后被调用,可以进行依赖于dom的操作(可以在这个阶段进行dom操作)
beforeDestroy(销毁前),
destroyed(销毁后)
子模板solt的用法
单个slot内容
<el-main><slot></slot></el-main> 子模板加入slot就允许在子模板中插入想要的内容
父组件中直接在子模板的中间插入<Header><span>xxxx</span></Header> 内容就显示在slot中了
多个slot内容
<div> <slot name="h1"></slot> <slot name="hh"></slot> <slot></slot> </div> 子模板 slot上加name
父组件:<Header> <span slot="h1">标题一</span> <span slot="h2">标题二</span> <span>标题三</span> </Header>
组件之间的传值
父组件向子组件传值 父组件页面部分引入子组件<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的双向绑定
组件的跳转 <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
导向一个新页面
let routeData = that.$router.resolve({ path:'/pos/admin/config/receiptsPrint',query: {id: that.pay.retail.id} });
window.open(routeData.href, '_blank');
新页面的样式修改
ar l=(screen.availWidth-800)/2;
var t=(screen.availHeight-800)/2;
window.open('http://www.baidu.com','_blank','width=800,height=800,top='+t+',left='+l+',menubar=no,toolbar=no,location=no,status=no')
VueX
1: State
const store = new Vuex.Store({
state:{
products: [
{name: '鼠标', price: 20},
{name: '键盘', price: 40},
{name: '耳机', price: 60},
{name: '显示屏', price: 80}
]
}
})
export default {
data () {
return {
products : this.$store.state.products //获取store中state的数据
}
}
}
2: Getters
getters:{ //添加getters
saleProducts: (state) => {
let saleProducts = state.products.map( product => {
return {
name: product.name,
price: product.price / 2
}
})
return saleProducts;
}
}
export default {
data () {
return {
products : this.$store.getters.saleProducts
}
}
}
3: Mutations
const store = new Vuex.Store({
mutations:{ //添加mutations
minusPrice (state, payload ) {
let newPrice = state.products.forEach( product => {
product.price -= payload
})
}
}
})
export default {
data () {
return {
products: this.$store.state.products
}
},
methods: {
minusPrice() {
this.$store.commit('minusPrice', 2); //提交`minusPrice,payload为2不接受异步
}
}
}
4: Actions
const store = new Vuex.Store({
actions:{ //添加actions
minusPriceAsync( context, payload ) {
setTimeout( () => {
context.commit( 'minusPrice', payload ); //context提交
}, 2000)
}
}
})
export default {
data () {
return {
products: this.$store.state.products
}
},
methods: {
minusPriceAsync() {
this.$store.dispatch('minusPriceAsync', 5); //分发actions中的minusPriceAsync这个异步函数
}
}
}
5: Modules
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }
const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
UI框架 移动端 VUX、mint-ui pc端 element UI