2.vue.js实例的创建

挂载点、插值表达式

 

<!

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>Vue入门</title>

 

<scriptsrc="./vue.js"></script>     <!--   单闭合时不合法-->

 

</head>

<body>

 

<divid="root">{{msg}}</div>     //插值表达式

 

<script>

newVue({//Vue实例

el:"#root",//挂载点(绑定的dom中的元素)

data:{//Vue中的数据

msg:"Hello World"

}

})

</script>

 

</body>

</html>

//HelloWorld

 

 

模板(挂载点中的都是模板)

<!

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>Vue入门</title>

 

<scriptsrc="./vue.js"></script>  

 

</head>

<body>

 

<divid="root"></div>

<-- 模板-->

<-- <h1>Hello{{msg}}</h1> --> 

<script>

newVue({//Vue实例

el:"#root",//挂载点(绑定的dom中的元素)

template:'<h1>Hello{{msg}}</h1>',//模板

data:{//Vue中的数据

msg:"World"

}

})

</script>

 

</body>

</html>

//HelloWorld

指令

<!

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>Vue入门</title>

 

<scriptsrc="./vue.js"></script>

 

</head>

<body>

 

<divid="root">

<!-- v-text Vue的指令number元素中显示的变量-->

<h1 v-text="number"></h1>

</div>

 

<script>

newVue({//Vue实例

el:"#root",//挂载点(绑定的dom中的元素)

template:'',//模板

data:{//Vue中的数据

msg:"world",

number:123

}

})

</script>

 

</body>

</html>

 

 

//123

 

 

 

 

<divid="root">

<!-- v-html 非转义显示内容 v-text转义显示内容(<h1>123</h1>)-->

<div-html="content"></div>

</div>

 

<script>

newVue({//Vue实例

el:"#root",//挂载点(绑定的dom中的元素)

template:'',//模板

data:{//Vue中的数据

content:"<h1>123</h1>"

}

})

</script>

 

 

//123

猜你喜欢

转载自blog.csdn.net/weixin_38898423/article/details/80685742
今日推荐