Vue的安装与初识(2)

最新推荐文章于 2024-08-27 09:28:13 发布

Kreuz流光

最新推荐文章于 2024-08-27 09:28:13 发布

阅读量319

点赞数

分类专栏： Vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44206148/article/details/121333211

版权

Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

不推荐直接安装vue.cli脚手架，推荐直接在html中用<script>标签引用vue.js的形式入门。

完成引入后，用浏览器打开在console会提示安装Vue Devtools ，并在插件详情中设置允许访问文件网址这样插件栏中Vue Devtools的图标才会亮（工作）。

API

全局配置

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

hello world 代码：

<!DOCTYPE html>

<head>

<title>初识Vue</title>

</head>

<body>

<!--总结

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

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

3.root容器里的代码被称为【Vue模板】，模板经过解析变成正常的html代码再放回原位置（绑定id的位置）;

-->

<h1>hello, {{name}}!</h1>

</div>

Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

// 创建Vue实例

new Vue({

el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串,也可以用class 与class选择器配合此例子中改成class="root" 和 el: ".root"

//上行也可以写成 el: document.getElementById('root')

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

name:'world!'

}

})

</script>

</body>

</html>

上代码中容器里的双大括号{{}}里可以写js表达式,不限于data里的数据.例如想让“world”大写大括号可以写{{name.toUpperCase（）}}

容器和Vue实例是一一对应的关系，一对多和多对多都不行，可以尝试把代码改成两个容器用相同的clss，Vue实例再用class选择器来选择容器，发现只有第一个容器能被注入内容。可以动手试试new两个Vue对象来选择一个相同的容器。

Vue开发者工具安装后在浏览器可以看到图1位置，点开图2位置可以观察Vue的结构,可以看到左侧有两个Root实例右边是data,这里的Root是根的意思。现阶段可以借助开发者工具修改data里的数据，保存后页面的数据也会随之改变，因为他们已经绑定了。

关于开发版和生产版，开发版有完整的提升，对开发更友好，而生产版去掉了这些东西，所以体积更小。

例如把上代码new Vue这行中的new删掉

浏览器会报错

阅读Vue原码5092行：

function Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}

我们知道这里的if会判断Vue里有没有this对象，如果我们没用new，Vue是不会有this对象的，所以会报错'Vue is a constructor and should be called with the `new` keyword'，如果你使用的是生产版本则不会有这个提示。

Vue作者表示在设计Vue时参考了MVVM模型

MVVM 模型

1. M：模型(Model) ：对应 data 中的数据

2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ： Vue 实例对象

摘录自Vue官网：

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

一般实例化Vue用vm来做变量名。

Kreuz流光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的安装与初识(2)

不推荐直接安装vue.cli脚手架，推荐直接在html中用<script>标签引用vue.js的形式入门。完成引入后，用浏览器打开在console会提示安装Vue Devtools ，并在插件详情中设置允许访问文件网址这样插件栏中Vue Devtools的图标才会亮（工作）。API全局配置Vue.config是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：hello world 代码：<!DOCTYPEhtml>..
复制链接

扫一扫