- IDE sublime 3
- node环境
安装：
//切换目录
npm init
npm i vue
- 建立html文件
代码：
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
template:'<div><h1>大家好！！！{{text}}</h1></div>',
data:{
text:'hello Vue',
}
});
</script>
</body>
</html>
插值表达式
- {{ 表达式 }}
- 对象 (不要连续3个) {{ {name:'song'} }}
- 字符串 {{ 'xxx' }}
- 判断后的布尔值 {{ true }}
- 三元表达式 {{ true ? '正确' : ' 错误' }}
指令
-
v-xxx开头，当做是属性
image.png
template中可以用es6的模板字符串来换行 tab键上方那个键 `
- v-text 和 v-html的区别
new Vue({
el:'#app',
//es6 的模板字符串可以方便的换行，同时template必须有一个根节点
template:`
<div>
<span v-text="myText"></span>
<hr/>
<span v-html="myHtml"></span>
</div>
`,
data:{
myText:'<h1>我是inner Text</h1>',
myHtml:'<h1>我是inner Text</h1>',
}
});
image.png
v-bind 指令
- 给元素的属性绑定变量
- 给自定义属性绑定变量
<div v-bind:file = “data中定义的变量"></div>
<div :file = "data中定义的变量"></div>
//如果是常量的话 要用单引号括起来
<div :file = " ' 我是常量' "></div>
v-on 指令
image.png
v-bind 和v-model的区别
- v-bind 可以给任何属性赋值，是从vue到页面的单向数据流
- v-model 只能给具备value属性的元素进行双向数据绑定
v-for 的使用
image.png
this
image.png
