一、实例化对象
<script>
// 第一步实例化对象
new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
</script>
二、绑定元素
<body>
<div id="app">
<!-- 使用数据{
{数据}} -->
{
{msg}}
{
{num}}
</div>
<!-- 外部不可以使用语法 -->
{
{msg}}
<script src="js/vue.js"></script>
<script>
// 实例化对象
new Vue({
// 绑定元素,绑定该区域可以使用vue的语法
el:'#app',
// data内部书写数据
data:{
// 书写数据
msg:'hello 小程序',
num:0
}
})
</script>
</body>
三、什么是MVVM
MVVM是一种设计模式,M指的是model数据层 V指的是view视图层 VM指的是控制层,把数据和视图联系起来
<body>
<!-- 指的是MVVM中的V -->
<div id="app">
{
{msg}}
</div>
<script src="js/vue.js"></script>
<script>
// new Vue指的是VM把视图和数据联系起来。
new Vue({
el:'#app',
// 指的是MVVM中的M
data:{
msg:'hello'
}
})
</script>
</body>
四、绑定元素
- 在vue中el进行绑定元素,其中绑定的一般id,因为id是唯一的,即使有很多id但是只是绑定以一个id
- 其中el也可以绑定标签名/类名,其中不可以绑定body或者html(因为vue后面一般使用的是模块化开发,最终spa单页面开发,防止范围设置过大)
- 可以实例化多个对象,但是不建议这么做,因为在后期开发中一般情况下是一个页面是一个模块,如果外侧已经实例化在实例化内部标签也不会生效。
<body>
<main>
<div class="box">
{
{msg}}
</div>
<div class="one">
{
{msg}}
</div>
</main>
<script src="js/vue.js"></script>
<script>
new Vue(
el:'main',
data:{
msg:'hello'
}
})
new Vue({
el:'.one',
data:{
msg:'sdljfdl'
}
})
</script>
</body>
五、v-html、v-text
- 在vue中变量一般可以作为标签的属性,当变量作为标签的属性的时候不需要{ {}}
- v-html作为标签的属性可以识别标签,xss风险可以通过识别html标签来攻击应用程序
- v-text作为标签的属性不可以识别标签,把标签当做字符串
<body>
<div id="app">
<textarea name="" id="" cols="30" rows="10"></textarea>
<div v-html="msg"></div>
<div v-text="msg"></div>
<