vue2 基础（一）

小咪咪 2022-05-27 12:41 208阅读 0赞

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

\---------------------------------------------------------------------------------------------------------------

vue 不支持ie8；

使用vue有多种方式，开发中我们使用npm下载模块，现在我们学习基础，可以直接引入vue.js

就和引入jquery一样，没有什么区别，特别简单；

好吧，什么也别想，什么也别困惑，学着学着就明白了，坚持就行：

第一步：引入我们的vue.js 文件，别把vue看的很难，就当成jquery来学就简单了；

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< title>vue2基础</ title>

< script src= "vue.js"></ script>

</ head>

< body>

第一步，先引入vue.js 文件 要自己去下载咯，这里不提供

</ body>

</ html>

第二步：我们在<body>中添加点内容吧；

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< title>vue2基础</ title>

< script src= "vue.js"></ script>

</ head>

< body>

< div id= "main">

< span>我是静态的内容</ span>

</ div>

</ body>

</ html>

第三步：这一步很重要，写法需要记住，就是死的东西，固定好的；

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< title>vue2基础</ title>

< script src= "vue.js"></ script>

</ head>

< body>

< div id= "main">

< span>\{ \{abc\}\}</ span>

</ div>

< script>

// 第三步首先new 一个Vue()，这一步是固定的，就这么写就行了,

// 下面首先会设置 el 这个也是固定的，el代表我们这个Vue绑定到哪个元素上，

// 后面写上div的ID就可以了，我们的ID 是 main, 注意加\#

// data代表数据，可以理解为一个data对象，这个是固定的,我们在对象里面写了一个 abc 属性

// 并且 abc 的值为：我就是数据部分 ; abc 是随便起的名字，

// 这么简单的设置之后，我们在span 中写上\{ \{ abc \}\},就可以在span 中显示 abc;

new Vue(\{

el: "\#main",

data:\{

abc: "我就是数据部分"

\}

\});

</ script>

</ body>

</ html>

总结：上面我们学习了

（1） 如何引入vue ，在<script>标签中引入

（2） 如何创建vue ， new Vue(\{  .......   \})

（3） 然后创建的Vue（） 里面的两个东西，一个 el  ,一个data ,以及他们的作用；

当然了还有其他的东东，下面会说到；

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关一.Vue基础:一Vue实例

文章目录一.Vue基础:一Vue实例一.构造器二.属性与方法一.Vue基础:一Vue实例一.构造

我不是女神ヾ/ 2023年06月18日 12:59/ 0 赞/ 7 阅读

相关 Vue基础整理2

1、获取DOM元素及组件 > 使用ref > > <div id='app'> > <input type='button' @click='getE

淡淡的烟草味﹌/ 2022年12月13日 14:19/ 0 赞/ 210 阅读

相关 Vue 2.0 vue-router基础学习（一）

之前的组件部分学习告一段落，紧接着就到了最关键也是（据说）最恶心的路由部分。废话不多说，进入正题。一、安装 1.最简单的方法就是在页面直接引入vu

分手后的思念是犯贱/ 2022年06月12日 10:37/ 0 赞/ 211 阅读

相关 vue2 基础（六）

本篇我们了解一下 v-model , v-if , v-for 这三个指令；当你了解这个指令怎么用的，是干嘛的，就可以了，更多，更具体的信息

- 日理万妓/ 2022年05月27日 12:45/ 0 赞/ 216 阅读

相关 vue2 基础（三）

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；这里只是用更为直观的方式让你了解一下vue； \----------------

柔光的暖阳◎/ 2022年05月27日 12:44/ 0 赞/ 209 阅读

相关 vue2 基础（二）

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；这里只是用更为直观的方式让你了解一下vue； \----------------

待我称王封你为后i/ 2022年05月27日 12:43/ 0 赞/ 201 阅读

相关 vue2 基础（一）

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；这里只是用更为直观的方式让你了解一下vue； \----------------

小咪咪/ 2022年05月27日 12:41/ 0 赞/ 209 阅读

相关 Vue2基础汇总

搭建并启动项目脚手架搭建项目 vue init webpack my-project vue init webpack-simple my-project(简单

今天药忘吃喽~/ 2022年03月18日 15:38/ 0 赞/ 288 阅读

相关 Vue2.5基础

1.1 创建第一个Vue实例官方网站：https://cn.vuejs.org 学习 --> 安装刚开始学习Vue，使用最简单的安装方式，直接用<script>

水深无声/ 2022年01月07日 09:31/ 0 赞/ 263 阅读

相关 vue基础2

2.1 模板语法 > mustache 语法中是支持写js的 1. 用法：内容：必须加 \{ \{ js语法 \}\} 属性

女爷i/ 2021年10月01日 08:00/ 0 赞/ 346 阅读