美文网首页
vue实例创建

vue实例创建

作者: 似朝朝我心 | 来源:发表于2020-09-08 10:26 被阅读0次

1.Vue框架已经来到了Vue.js 2.0版本,目前行业非常火热,使用Vue.js进行开发的著名企业有滴滴,美团,小企业更不必说,17-18年在GitHub上火爆。
2.Vue官网:https://cn.vuejs.org/
3.Vue官方提供的安装vue的方法和教程:

(1).<script>脚本引入,分为开发版本和生产版本。(我们日常用的话一般选择开发版本)


去官网点击绿色按钮区域即可下载开发版本使用

(2).CDN的引入方式使用vue:(这个方便使用)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

4. 将下载好的vue.js脚本文件放入新建的vue学习文件夹下

5.创建一个index.html。


6.通过外部引入的vue.js脚本应该放在head标签里。


外部引入js脚本一般放在head部分,而不是body部分(body部分适用内嵌式脚本),这是因为页面抖屏的缘故。

7.通过new Vue创建一个vue实例。


image.png

创建vue实例的时候,可以给它传参数。


image.png
第一个参数是el,和哪个dom节点做绑定,el是element(中文元素)的缩写,这里定义的vue实例去接管id="app"的内容,形成一个挂载点。
image.png

第二个参数是data.这是因为vue里面的数据都会放在data里面


注意逗号
{{}}双大括号即插槽(又叫插值表达式)会把data里面写的数据,在页面中显示,可以看成是一一绑定对应的关系。
image.png

挂载,模板,实例的区分(为了代码好看,不建议把模板写入实例中去,实在影响美观)。


image.png

相关文章

  • vue基础知识

    new Vue() 创建 Vue 实例,其中 Vue.components() 也可以创建 Vue 实例。 Vue...

  • vue实例创建及数据挂载渲染

    vue实例篇 vue实例创建及数据挂载渲染 一、 创建实例 vue实例创建其实很简单,首先讲一下vue其实是由一个...

  • Vue.js学习笔记(2)

    Vue 实例 创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的:...

  • Vue引入、指令、挂载点、模板、实例和绑定事件

    Vue实例 创建一个Vue实例,每个Vue应用都是通过 Vue 函数创建一个新的Vue实例 开始的:var vm ...

  • vue实例

    Vue实例化 1.创建一个Vue实例 通过Vue构造函数new 一个新的vue实例, 当你创建一个vue实例,你可...

  • Day9:Vue文档精读2——Vue实例

    Vue实例 创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 数据与...

  • Vue学习的第二天

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的,所有的Vue组件都是Vue实例,...

  • Vue实例

    创建一个Vue的实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 当创建一个Vue实例时,就传...

  • Vue实例详解

    Vue实例详解 创建Vue实例 每个Vue的应用都是通过vue函数创建一个新的Vue实例开始的 值得注意的是所有的...

  • Vue.js实例

    创建一个 Vue 实例 每个 Vue 应用都是通过用Vue函数创建一个新的Vue 实例开始的: 当创建一个 Vue...

网友评论

      本文标题:vue实例创建

      本文链接:https://www.haomeiwen.com/subject/dghrektx.html