一.怎么使用vue.js
导入 Vue 的 JS 文件,文件中声明了一个名为 Vue 的构造函数
new Vue(),创建 Vue 的实例对象,用 vm 来表示
通过 el 选项,指定 vue 所控制的 DOM 区域
创建 vue 所控制的 DOM 区域。 注意:选择器一定要和 el 选项的值匹配
将 Vue 中定义的数据渲染到页面 ,Vue 提供了 data 选项,用来定义数据,供页面渲染时使用
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<div id="add">
<p>{{msg}}</p>
</div>
<!--导入vue.js-->>
<script src="./vue.js"></script>
<script>
//实例化一个vue
new Vue ({
el:'#app',
data:{
msg:'xxx'
}
})
</script>
</body>
效果
input v-model="name"
双向数据绑定 页面对于input的value改变,能影响内存中name变量内存js改变name的值,会影响页面重新渲染最新值
插值表达式
{{ 表达式 }}
对象 (不要连续3个{{ {name:'jack'} }})
字符串 {{ 'xxx' }}
判断后的布尔值 {{ true }}
三元表达式 {{ true?'是正确':'错误' }}
可以用于页面中简单粗暴的调试
注意: 必须在data这个函数中返回的对象中声明
id id选择器/class class选择器
id相当于人的身份证,不可以重复
class相当于人的名称可以重复
一个html标签只能绑定一个id名称
一个html标签可以绑定多个class名称
id选择器是以#开头
class选择器是以.开头
id一般情况下是给js用的,所有除非特殊情况下,否则不要用id去设置样式