Vue.js------------------3Vue.js原理
Vue.js原理
vue没有很神秘，他只是在浏览器渲染完基础的模板之后，把vue认识的地方进行了字符串替换而已。
这就是为什么vue的代码要放在body内的所有html代码之后。
vue是在html渲染完成后进来把它可以替换的全部替换掉
html代码应该在html代码中，而不是散落在js代码中。
而且分离了之后不写js代码了，那么if for怎么办？---->用指令来做
指令v-if添加到标签的属性上，html是不排斥的，尽管html不认识此属性，就把他放在那里。
vue指令：为了js和html的分离
之所以叫做指令，是它可以发出指令，命令vue做一些重复的事情，不需要用户再自己写逻辑
至于这个指令变成什么样子的js代码，不由你控制，而是vue控制，你去学习怎么声明与结果即可，中间怎么做的交给vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入vue.js --> <script src="./bower_components/vue/dist/vue.min.js"></script> </head> <body> <!-- View --> <div id="app">
<!-- 浏览器刚开始渲染的就是{{word}}只是速度太快，你看不到vue把｛｛word｝｝用data里面的word变量的值替换了
至于为什么用｛｛｝｝而不是￥￥word￥￥，因为不是你的世界，如果框架是你开发的，你完全可以用，可能作者认为｛｛｝｝更容易检索吧--> <h3>{{word}}</h3> <!-- <input type="button" value="点击" v-on:click="show()"> --> <!-- 简写 --> <!-- 不传参数括号不用写 --> <input type="button" value="点击1" @click="show"> <input type="button" value="点击2" @click="show(15)"> </div> <script> // 管住手不要再去写dom //Module var m = { word:"Hello World!I am Vue!" }; //ViewModule //没写之前Module和VIew都是孤立的，谁都不知道对方 //ViewModule是建立联系 //Vue对象担当VM，形成双向绑定，监听view的变化 //从Module侧面看，数据绑定帮助更新view，即dom //从view侧面看，DOm listener帮助监听dom的变化。 //dom绑定监听，一旦触发事件，就会通知vm，vm就会去更改module //一旦module就会触发data binding，module通知vm数据变了，vm就会去更改view //之所以可以通知vm是因为module底层都被加工成了get和set，一旦改了就会知道谁依赖它 //用的就是watcher，vm就去更新dom //这就是vue.js的精髓。 var vm = new Vue({ //挂载点，用的是选择器 el: "#app", //数据 data: m, //更多的是将Module直接放在这里，而这里m是引用,然后就不用你管了，VM自动 //方法,此时dom上要有能相应方法的dom来添加事件 methods: { show: function(){ l = arguments[0] console.log("hello Vue"+l); this.word = "你大爷"+l; } } }); // 打开浏览器发现失败了， //因为加载了vue.js执行代码，没有发现div.app此dom，因此失败 // 把script放到body后即可 </script> </body> </html>
以前的痛点
最恶心的是拿到一个项目进行维护，打开html查看元素的时候，只有一个div标签，里面什么都没有，此时心态崩了
因为你要到大量的js代码中找到操作这块div的js代码，但对于js来讲，就是js代码，很难定位和查找操作html的代码
导致js中参杂了大量了html代码，尤其是用js添加一块html代码。
规范：html中必须出现html，js可以操作html代码，但是不可以凭空创建dom标签添加到html中
通过data去控制view，这里可能有疑问，data怎么控制view呢？用的就是指令，data的true则显示，false则不显示
通过事件来修改数据的true和false来控制html元素的渲染或者不渲染
原来是用js的if判断bool，然后操作dom更改css属性display为none来去掉或其它
用了vue之后就不允许操作dom，以后是否显示由变量控制，通过指令的方式，你要做的就是把他们连接起来。
v-if只不过是vue可以读懂的属性而已，如果不引入vue，那么就会在html中真的显示v-if属性，brower对于看不懂的属性直接扔在那里不管
引入vue，它可以看懂v-if，就在后面做了你原来js操作dom的操作而已，v-if用来定位，拿到后面的字符串eval运行一下，一看是true，那就渲染上
