!+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>