A simple example of Vue
Introduction of Vue
VUE (pronunciation / vjuː /, similar to View ) is used to construct a set of user interfaces progressive frame . The other frame difference is large, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, is not only easy to use but also easy to integrate third-party libraries or existing project. On the other hand, when the modern tool chain and various support libraries when used in combination, Vue also fully capable of providing drive for complex one-page application.
1, first of all we need to vue.js vue official website to download the file https://cn.vuejs.org/
Into the tutorial - choose to install - select development version
After entering a bunch of JS code, we select all copy
2, create a vue exercise program, create a file in the project vue.js, generals copy paste the code into the net, introduced vue.js library package in the index page, create a vue instance, binding node, the data set. {{Msg}} is the value of the data in the data acquisition.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<Title> vue a simple example </ title>
<! - introduced vue library ->
<script src="vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<div id="root2"></div>
<script>
//创建一个vue实例--与ID为root的结点进行绑定--data 是vue实例中的一些数据存放地点
new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
</script>
<script>
//原生js实现
var dom =document.getElementById("root2");
dom.innerHTML="hello world!";
</script>
</body>
</html>
3、 效果的实现，如果能够成功的获取到data中msg的数据，就表示vue已经成功引用
