Vue框架
环境：
windows
python3.6.2
Vue的cdn：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
本地Vue.js下载： https://cn.vuejs.org/v2/guide/installation.html
Vue官网： https://cn.vuejs.org/index.html
Vue的使用
通过new Vue 来实例化vue对象，其操作都通过这个对象来实现，el绑定到标签，切记，vue只认识id,不支持class,声明变量都在data里面
vue通过 {{temp}} 来渲染变量
{{count+100}} # 求和
v-text # 为标签插入text文本
v-html # 为标签插入html
v-show # 根据布尔值判断，显示与隐藏，
v-if # if判断语句，根据真假值来显示对应的内容
v-else # 与v-if连用
v-for # for循环，如果对象是列表的话，可以显示其索引，字典默认显示value值<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue</title>
</head>
<body> <div id="app">
<p id="p1">{{temp}}</p>
<p id="p3">{{temp2}}</p>
<p id="p2">{{count+1000}}</p>
<div v-if="ok">孙杰辉</div>
<div v-else>陈人建</div>
<ul>
<li v-for="item in obj2">
{{item}} </li>
</ul>
<ul>
<li v-for="item in obj">
{{item.name}}
{{item.age}}
{{item.sex}}
</li>
</ul>
<input type="button" v-on:click="showme()" value="v-on点击事件">
<input type="button" @click="showme" value="v-on的另一种写法 @点击">
<a v-bind:href="url">v-bind</a>
<a :href="url">v-bind的另一种写法</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
temp:"100",
ok: true,
count:5,
obj:[{name:"孙杰辉", age:54,sex:"女"},{name:"陈人建", age:56,sex:"男"}],
obj2:[1,2,3,4,5,6,7,8],
url:"http://www.baidu.com",
temp2:'temp2',
},
methods:{
showme:function () {
alert(this.temp); }
}
});
setTimeout(function () {
vm.temp2= '时间设定'
},5000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="i1">
{{message}}
</div>
<script>
new Vue({ // 通过new Vue定义一个方法
el:'#i1', // el 是通过jquery的方式获取标签，注意（只能获取到id的 class的不能使用） data:{ // 通过使用data关键字对应的字典类型，然后在字典中使用之前定义的message变量通过映射的方式给这个变量进行赋值
message:'hello world!'
// 现在的message就是被hello world给覆盖掉了
}
})
</script>
</body>
</html>