vue的一些基本知识

配置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