Vue.js 笔记

定义一个Vue对象

new Vue({
  el:"#id",
  data:{
    foo:xxx,
    bar:xxx
  },
  methods:{
    method1:function(){
      
    },
    method2:function(){
      
    }
  },
  watch:{
    "foo":function(value,oldValue){
    
    }
  },
  components:[aaaa,bbbb]
})

其中el代表这个Vue对象会作用在哪个元素上,el后面是一个表达式。
data代表model,里面的对象和值可以在画面上渲染
methods里面的函数相当于事件,可以与页面元素绑定
watch是对model的监听,当值发生变化时做一些动作
components 导入其他组件

Vue的指令

  • v-text
  • v-html
    绑定元素的内容
  • v-bind:属性名 可简写为 :属性名
    绑定属性
  • v-model 用于表单元素双向绑定
  • v-on:事件名 可简写为@事件名 如@click
    绑定事件,还可在事件名后面加上修饰符 如 @keyup.enter 指按enter时触发的事件
    还可以加.stop .prevent 表示阻止默认事件响应和冒泡,还有一些其他修饰符
  • v-if v-show
    条件显示,两者区别是 if将不输出dom元素,show无论何时都输出,只是用css隐藏
  • v-for
    循环

跟Angular差不多

Vue的组件

props属性,定义可以向组件内传的值
$emit函数,用于向组件外部发射事件
slot 允许父组件向子组件内部固定位置插入元素

另外还有broadcast和dispatch,需要通过events来捕捉

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容