vue技术栈--》从vue2

---

这里可以从vue的官网入手，里面的教程详细的介绍了vue的配置与安装，里面的API也详细的介绍了vue相关语法的使用，遇到不熟悉的语法命令这里都可以找到，以及还有其它的一些功能方面这里不在赘述，链接地址如下：https://cn.vuejs.org/

1.6 Vue的开发环境配置

---

三步：

1.下载开发版本的vue，在官网就能找到

2.安装开发者调试工具Vue.js devtools,嗯~，这个工具在谷歌的应用商城下载，但在国内访问不了，如果下载不了，私我。

3.阻止vue在启动时生成生产提示

Vue.config.productionTip = false

2.Vue打印Hello World？

===================

前言：

嗯~,在网页上输出Hello World 很简单，直接div容器里套一个一级标签

hello world

。就能在页面上显现出来，那我们为啥还要用vue呢，这不是多此一举吗？在这我要声明一点，如果我们要是用常规的前端三大基础语言在网面上写，内容就会固化，说白了，就是把内容写死了，如果后期进行网页内容的更新维护这不很麻烦？所以在这里引入Vue进行数据的管理与更新。

编程过程：

2.1  引入vue：

---

官网上有两个vue版本，开发版本(包含完整的警告和调试模式)和生产版本(删除了警告，33.46KB min+gzip)在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

2.2 准备好一个容器，一般常借用Id选择器，for example:

---

<div id="test"> //id为test，为vue建立起联系

    <h1>Hello world</h1>

</div>

2.3 创建Vue实例和id选择器建立联系

---

<script>

    Vue.config.productionTip = false //阻止 vue在启动时生成生产提示



    //创建Vue实例

    new Vue({

        el:'#test', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择字符串

        data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。

            name:'World'

        }

    })

</script>

如果我们想将Hello Word 中的World进行内容的更改，我们就需要选择特定的容器进行内容的更改，那么

Hello World

显然不能满足我们的要求，所有我们要用一个变量来替代我们要改变的内容，如代码所示，采用 name:‘World’ 前者是变量，后者是我们要替换的值。如下

<div id="root">

    <h1>Hello {{name}}</h1>

</div>

这样就在页面上输出Hello World了，如果想修改World改为People，修改name的值即可。这里Vue的基础搭建与使用已经介绍完毕，当然也只是最基础，呜呜呜~

2.4  初始Vue的注意事项

---

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.容器和vue实例只能一对一;

5.真实开发的实例只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的数据发生改变，那么模板中用到该数据的地方也会自动更新

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

注意区分：js表达式 和 js代码（语句）

1.表达式：一个表达式会 生成一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). test(1)

(4). x == y?‘a’:‘b’

2.js代码(语句)

(1). if(){}

(2). for(){}

2.5 内容的调试

---

嗯~，这个插件便是调试页面上vue的相关内容，是Vue实例的根，其它操作的相关方法等有机会在细讲，这里不在赘述。

呜呜~，看到这还不点赞加收藏？

下一篇：

https://blog.csdn.net/qq_53123067/article/details/124622575?spm=1001.2014.3001.5501

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。