Javascript

vue学习记录一

本文主要是介绍vue学习记录一,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

!+Tab完成html默认结构

ctrl+K+U取消注释

ctrl+K+C注释当前选择行

{{XXX}}插值语法

XXX是表达式。

表达式:一个表达式生成一个值,可以放在任何需要值的位置,一般解析标签体的内容

指令语法:一般用于解析标签的内容,包括标签属性,标签体内容,绑定事件等

<a v-bind:href="url">点我</a>

v-bind来指示,去找变量url的值,值一般放在data中。v-bind可以简写为“:”,上式可以化简为

<a :href="url">点我</a>

v-model:

只能用于表单类元素上,得有输入值才可以(得有value值),v-model:value=可简写为v-model=

v-on:

用于事件执行,可简写为@

Vue的实例与容器绑定的及data两种代码样式

代码一:

<div id="root">

</div>

<script type="text/javascript" >

  new Vue({

    el:'#root’,
//data的第一种写法

    data:{
      name:'博客园'
  }
})

</script>

 

代码二:

<div id="root">

</div>

<script type="text/javascript" >

    const x=new Vue({
//data的第二种写法,学习组件时必须的写法
        data:function(){
     return{ 
      name:'博客园'
        }
        }
    })
//上述data代码可简化为
      data:(){
        return{
          name:'博客园'
           }
}
 
    v.$mount('#root')

</script>        

 

这篇关于vue学习记录一的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!