初识vue
大家都那么热爱他一定有原因，我也特想了解。
我来咯，
首先用vue开发版，用一个标签在head中插入，script标签src属性引入vue文件，就像jquey一样在script，但是放在head里最好
今天了解挂载点，模板，实例
例如：<div id="root">{{msg}}</div>//可以写在这
<script>
new Vue({
el:"#root",
template:‘<h1>hello {{msg}}</h1>’也可以写在这
data:{
msg: "hello world";
}
})
</script>
挂载点就是vue实例里el属性对应的id，所对应的dom节点
在挂载点里的内容就是模板,模板可以写在挂载点里面，也可以写在实例里template属性里面
实例中里面指定挂载点，然后写上模板，Vue结合模板和数据，生成最终要展示的内容，然后把内容放在挂载点中。
Element 元素，Data数据，root根，Template 模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="index.css" /> <script src="./vue.js"></script><!-- 引入在head避免出现抖屏 --> </head> <body> <!-- 挂载点，模板，实例 --> <div id="root"> <h1>你好{{aaa}}</h1><!-- 挂载点里面的内容就是模板内容，模板内容也可以写在实例里面template属性里面 --> </div><!-- 挂载点 --> <!-- 数据事件和方法--> <div id="thing" @click="handleClick"> {{content}} <!-- v-text会进行转义，就是输出<h1>哈哈哈哈哈哈哈哈</h1>， --> <!-- 差值表达式 --> </div> <!--属性绑定和双向绑定--> <div id="roots"> <div :title="title">你好自己</div> <input type="text" v-model="content" /> <div>{{content}}</div> </div> <!--计算和监听--> <div id="jstitle"> 姓：<input v-model="firstName" /> 名：<input v-model="lastName" /> <div>{{fullName}}//{{cont}}</div> </div> <!-- v-if/v-show/v-for --> <div id="ifshow"> <div v-show="show">隐身术</div> <button @click="handleClick">显示/隐藏</button> <ul> <li v-for="(item, index) of list" :key="index">{{item}}</li> </ul> </div> <script> // 挂载点，模板，实例 new Vue({// 实例 el: "#root",//实里面定义挂载点 template: '<h1>你好你好你好</h1>',//定义模板 data: { aaa: "hello world"//如果没有在实例里面定义模板，data下的内容会自动在加载到挂载点上。 } }); //数据事件和方法 new Vue({ el: "#thing", data: { number: 1233, content: "哈哈哈哈哈哈哈哈", }, methods: { handleClick: function () { this.content = "ojbk" } } }); //属性绑定和双向绑定 new Vue({ el: "#roots", data: { title: "this is title", content: "this is content" } }); //计算和监听 new Vue({ el: "#jstitle", data: { firstName: "", lastName: "", cont: 0 }, computed: {// 计算 fullName: function () { return this.firstName + '' + this.lastName } }, watch: {//监听 fullName: function () { this.cont++ } } }); //v-if v-show v-for new Vue({ el: "#ifshow", data: { show: false, list: [1,2,3] }, methods: { handleClick: function () { this.show = !this.show } } }) </script> </body> </html> <!-- v-html --> <!-- v-text --> <!-- v-on:click 绑定点击事件，在实例例定义methods, --> <!-- v-on:可以简写为@ --> <!-- v-bind:title单向的数据绑定--> <!-- v-bind:title可以缩写为： --> <!-- v-model:title双向的数据绑定 --> <!-- v-if 和v-show区别 如果只做一次显示隐藏用v-if,v-show不重节点树上面删除，反复用的话用v-show -->