Loading

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,那就渲染上

posted @ 2020-06-21 07:15  浅忆尘  阅读(178)  评论(0编辑  收藏  举报