浅谈Vue基础使用

浏览器反馈：

上述代码中我们可以看出 每一个独立的模板 有 且只能有 一个顶级的根节点，但是有人也会发现我们没有写data，所以模板里边也是可以不写data的，但是我们如果template也没有了呢

我们准备一下代码

今天天气好

浏览器反馈：

所以 如果指定了el，且没有template，那么el中的outerHTML将作为template

如果有template的话，优先选择template中的内容

---

VUE渲染思路

template => VDOM(虚拟dom) => html

它会先把数据加载到VDOM中，不影响html，然后VDOM处理后把结果返还给html中，减轻html负担

---

render

render是什么

字符串模板的代替方案，允许你发挥JavaScript最大的编程能力。该渲染函数接收到一个 createElement 方法 作为第一个参数用来创建 VNode

具体使用我们可以参考下方代码

四月中旬

浏览器反馈

我们可以看到内容为1906的h1标签替换了我们id为app的div

所以render方法与我们上边说的模板方法是一样的

render写起来要比模板方法渲染的时候更灵活一些，但是 它的写法相对复杂一些

他所有的功能都是依照这createElement这个参数来的，有点像event事件对象，事件一触发就会给我们传递一个事件对象来，这里也是，事件一触发，就会给我们传递过来一个createElement

而这个createElement就是我们刚才提到的一个虚拟dom

如果说他麻烦的话，我们不放处理一下挂载点被替换这个事情，然后对比一下

我们看一下代码

new Vue({

el:“#app”,

render(createElement){

return createElement(“div”,{attrs:{id:‘#app’}},[

createElement(“h1”,{attrs:{id:“h”}},“1906”)

]);

}

});

浏览器反馈

看一看到，功能是实现了，但是和模板方法比起来，代码比较麻烦，比较生涩。

---

延迟挂载

用模板方法的时候，不写挂载点就像封装了函数但是不调用一样，是不会执行的，但是挂载的时间是可以变得，我们从下方代码看一下。

浏览器反馈

可以看到浏览器上边是什么也没有的

延迟加载也比较简单，只需要后续给他制定一下挂载点就可以了

app.$mount(“#app”);

这是我们再看一下浏览器反馈

注意点：

1. el挂载点 不能是body和 html，不然会报错

2. 当实例被挂载后，实例对象山过就会有一个$el 的属性 这个属性中存的内容就是挂载的元素

3. vue实例上的内置属性都是以 $ 或者 _ 开头的 ，所以data中的数据命名不要使用 $ 或者 _ 来开头

因为 Vue 解析 data 以后 会把当前data中的数据记载到 实例对象中

---

视图更新

相应数据的变化(数据来驱动视图)

数据的变化会自动更新视图(自动更新渲染模板)

准备一下代码

{{name}}

注意点：

这里没有写template但是在页面元素中用双花括号也可以！

浏览器反馈

然后我们在控制台调整一下数据后浏览器的反馈

上图我们是通过app.name去修改的，实际上$data里边也有一个name，所以通过app.$data.name也可以去修改，不过没有app.name方便，所以就不掩饰了

---

数据劫持

数据劫持，其实就是变相的数据监听

我们现在通过代码来看一下

{{name}}

浏览器反馈

然后我们继续去控制台修改数据

注意 只修改数据是不会渲染到页面的，我们需要在调用一下render函数

手动更新数据，然后手动去渲染，但是借用vue的话vue会帮我们自动化完成，vue在里边添加了监听的功能，监听数据每次发生改变就去调用一下渲染的方法

监听是怎么来的

有一个方法

Object.defineProperty();

这个方法就是帮我们监听某个对象中的某个属性（只能是单一的属性）

当这个属性发生改变时，我们去调用一些方法，这些方法以对象的方式传给我

代码示例

let $data = {x:1};

Object.defineProperty(obj,‘x’,{

set(newVale){

$data.x = newVale;

render();

},

get(){

return $data.x;

}

});

现在去控制台直接修改数据就可以渲染页面

问题： 无法对新增的属性进行监听(只能监听一个)

我们想处理他的话，只能在写一个监听

我们从新整理一下代码

{{name}}

浏览器反馈

---

视图更新的问题

刚才我们说了，事件监听只能监听某个对象里的某一个属性，并不能监听多个属性

然后我们现在看一种情况

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。