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>