01、Vue-基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行找的皮卡丘</title>
<!--导包-->
<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{text}}</p>
<!--插入文本-->
<span id="app" v-html='msg'></span>
<!--插入html-->
<a v-bind:href='url'>{{url}}</a>
<!--给标签添加属性-->
<p>{{titel.split("").reverse().join("")}}</p>
<!--JavaScript 表达式支持-->
<p v-if="seen">判断seen是否为真</p>
<!--指令-->
<p>{{message}}</p>
<button v-on:click="reverseMessage">点我</button>
<!--绑定事件-->
<p>{{res}}</p>
<input type="text" v-model="res">
<!--双向数据绑定-->
<!--v-model 指令用来在 input、select、textarea、checkbox、radio
等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值-->
<!--只能绑定有value属性的标签-->
<div>{{istrue}}</div>
</div>
</body>
<script>new Vue({ // 创建一个vue对象
el: '#app', // 标签定位
// 数据驱动视图
data: { // 既可以是一个对象 也可以是一个函数
text: '文本插入',
msg: '<h1>html插入</h1>',
url: 'www.baidu.com',
titel: 'HBuilder',
seen: true,
message: "反转字符串",
res: "双向数据绑定",
istrue: 1 == 1,
},
// template:`<div>{{text}}</div>`,
//如果template中定义了内容 优先加载template模板 否则加载#app模板
methods: {
reverseMessage: function(e) {
this.message = this.message.split('').reverse().join('')
}
}
})</script>
</html>
