Vue中的模板
当我们创建一个Vue实例的时候，可以设置两个属性，el和template。其中el是用来设置挂载元素的，通常是一个CSS选择器。
var model = {
message:'Hello World'
};
new Vue({
el:'#app',
data:model
})
template属性的作用是，将HTML内容插入到对应的挂载元素中。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model,
template:"<div><input type='text' value='你好世界！' /></div>"
})
</script>
</body>
</html>
运行的结果是，template中的内容会替换挂载元素。
image.png
由于将HTML、CSS及JavaScript模板直接定义到template属性中，以字符串形式来描述，不便于编写和调试。所以，Vue提供了将模板写入到<script>或者
<template>中的形式。
使用<script>标签编写模板：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/x-template" id="temp">
<div>
<input type="text" value="你好世界！">
</div>
</script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model,
template:"#temp"
})
</script>
</body>
</html>
使用<template>标签编写模板：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<template id="temp">
<div>
<input type="text" value="你好世界！">
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model,
template:"#temp"
})
</script>
</body>
</html>
Vue中的数据
Vue主要的工作内容就是将DOM和数据模型进行双向绑定。完成这个功能是通过创建Vue实例。创建Vue实例，就是在调用Vue.js中的构造器来创建对象，因此我们可以获取到创建的JavaScript对象。在Vue实例中通过$data可以获取到数据模型。或者通过Vue实例直接获取数据模型中的数据。
var model = {
name:'悟空',
birthday:'1998-10-10',
major:'计算机科学与技术'
};
//创建Vue实例，完成双向绑定
var viewmodel = new Vue({
el:'#app',
data:model
});
console.log(viewmodel.$data===model) //打印结果为true
console.log(viewmodel.name===model.name) //打印结果为true
model.name='孙悟空'
console.log(viewmodel.name) //打印结果为孙悟空
viewmodel.name='八戒'
console.log(model.name) //打印结果为八戒
方法
在创建Vue实例的时候，可以创建方法对象，其中可以包含多个方法。这些方法可以用来处理事件或其它用途。在绑定事件处理方法的时候，需要用v-on指令，后续会详细介绍Vue中的指令。
下面，我们来实现一个输入框，用来输入名字，点击按钮后显示“你好，XXX”。
运行结果：
image.png
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"><br>
<button v-on:click="hello">点击我</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model,
methods:{
hello:function(){
alert("你好，"+this.message);
}
}
})
</script>
</body>
</html>
网友评论