一、Vue的基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js,官网下载开发者版本 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{
{msg}}<!-- 插值表达式写法 -->
</div>
<script type="text/javascript">
new Vue({
el:"#app",
// el绑定元素,绑定内部的区域可以使用vue的语法 一般使用的是id名(确保唯一性)
// 可以使用类名或者标签名,如果同时存在多个符合条件的,只绑定第一个
// 不能绑定根元素 html/body
data:{
msg:"欢迎来到Vue页面"
//存放数据
}
})
</script>
</body>
</html>
运行结果:
绑定元素也可以用$mount的方式调整代码段如下:
new Vue({
// el:"#app",
// el绑定元素,绑定内部的区域可以使用vue的语法 一般使用的是id名(确保唯一性)
// 可以使用类名或者标签名,如果同时存在多个符合条件的,只绑定第一个
// 不能绑定根元素 html/body
data:{
msg:"欢迎来到Vue页面"
//存放数据
}
}).$mount("#app")
二、插值表达式
vue中{ {}}插值表达式,内部可以放置变量,表达式
<body>
<div id="app">
<p>msg的结果是 {
{msg}}</p>
<p>1+1的结果是 {
{1+1}}</p>
<p>调用Math.random()是 {
{Math.random()}}</p>
<p>执行num>=1000?num:1000的结果是 {
{num>=1000?num:1000}}</p>
<p>调用getnum函数的结果是 {
{getnum()}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"欢迎来到Vue页面",
num:888
},
methods:{
//专门存放方法
getnum(){
return this.num
}
}
})
</script>
</body>
运行结果如下:
三、Vue的指令
指令一般作为标签的属性存在,如果变量作为属性的值不需要加{ {}},下面来看下指令的用法:
1.v-html和v-text
<body>
<div id="app">
<p v-html="msg">hello Vue</p>
<p v-text="msg">hello Vue</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"<span>欢迎来到Vue页面</span>"
}
})
</script>
</body>
运行结果:
由运行结果可得:v-html和v-text和原生js的innerHtml、innerText类似,v-html可以识别html结构,v-text不能识别,但是使用这两个指令的后果是会将标签里的内容全部替换,如果要求不替换的话,可使用插值表达式
注意:用v-html有xss风险(通过标签对网站进行攻击),安全性低
2. v-on:事件类型="函数名()" 可简