Vue.js------------------3Vue.js原理

Posted 2020-12-11 浅忆尘

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js------------------3Vue.js原理相关的知识，希望对你有一定的参考价值。

Vue.js原理

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>