为了账号安全,请及时绑定邮箱和手机立即绑定

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>
今天就学这么多,自己敲一敲增加记忆力。
点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消