vue的学习复习增加记忆力-原创手记-慕课网

项目改变了前端使用技术，技术选型使用vue.js，此流行框架。工作到此jquery一直陪伴多少个加班日。在不熟悉的道路上兴奋的走着，老大买了本网址的vue.js教学视频,小的不才，学习慢，只到第四章，so，那么就记录下vue的一些特性，一遍温故而知新。
vue的安装度娘有很多，粗略的流程是这样的：
1.安装node.js
2.安装npm
3.安装cnpm
4.安装cnpm install vue-cli
5.初始化项目 vue init webpack my-project 这里有一些配置输入
6.cd 到my-project 安装vue的依赖 cnpm install
7.启动项目 npm run dev
vue的开发我们选择的是idea，idea的环境配置依稀的在脑中回荡，vue的开发文件是一个.vue文件，script,style,template三部门组成。编写完全遵循es6的语法。
渲染

<div id="app-2">
    <span>{{inputValue}}</span>
    <input v-show="sShow"  type="text" v-model="inputValue" /> 双向绑定
   <button @click="show"></buttion>
  <p :is="mycomponent"><p>
    <table v-if="sShow">
        <tr v-for="data in tdata " >
            <td v-for = " (v,k) in data   ">{{v}}</td>
        </tr>
    </table>
</div>
<script>
new Vue({
  el: '#app-2',
  components:{mycomponent},//注册组件
 props:["number"],//父组件传递过来的值
  data: {
    return {
            inputValue:"",
           isShow:true,
            tdata:[
                {name:"zhanshan",age:34},
                {name:"lisi",age:23},
                mycomponent:mycomponent
           ]
        }
  },
computed: {//计算属性 与方法的区别就是 方法每次都会那最新的属性进行执行，而计算属性是绑定的属性更新了它才执行
    myValueWithoutNum(){
        return this.inputValue.replace(\/d\g,'')
    }
}
 methods:{
    show () {
        this.isShow = !this.isShow
    } ，
    cdValuetoParent  () {
        this.$emit('parentEvent','param')//通过触发父组件事件传地参数
    }
  }，
  watch：{
    inputValue(val, oldVal){ //监听data属性的变化
            //todo
    }
  }
})
</script>

今天就学这么多，自己敲一敲增加记忆力。