Vue.js------------------3Vue.js原理
2021-02-02 08:15
标签：检索 属性 规范 框架 var 为什么 -- html 数据绑定 vue没有很神秘，他只是在浏览器渲染完基础的模板之后，把它认识的地方进行了字符串替换而已。 这就是为什么vue的代码要放在body内的所有html代码之后。 vue是在html渲染完成后进来把它可以替换的全部替换掉 html代码应该在html代码中，而不是散落在js代码中。 而且分离了之后不写js代码了，那么if for怎么办？---->用指令来做 指令v-if添加到标签的属性上，html是不排斥的，尽管html不认识此属性，就把他放在那里 vue指令：为了js和html的分离 之所以叫做指令，是它可以指导命令vue做一些重复的事情，不需要用户再自己写逻辑 至于这个指令变成什么样子的js代码，不由你控制，而是vue控制，你去学习怎么声明与结果即可，中间怎么做的交给vue 最恶心的是拿到一个项目进行维护，打开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，那就渲染上 Vue.js------------------3Vue.js原理 标签：检索 属性 规范 框架 var 为什么 -- html 数据绑定 原文地址：https://www.cnblogs.com/gyxpy/p/12927914.htmlVue.js原理
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Documenttitle>
script src="./bower_components/vue/dist/vue.min.js">script>
head>
body>
div id="app">
h3>{{word}}h3>
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>以前的痛点
文章标题：Vue.js------------------3Vue.js原理
文章链接：http://soscw.com/index.php/essay/49881.html