前提

1. 准备一个容器

2. 创建一个Vue实例

2.1 完整代码

3.注意事项

初始Vue：

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

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

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

前提

从Vue官网下载vue.js

导入vue.js

<script src="vue.js" type="text/javascript"></script>

1. 准备一个容器

<div id="root"><h1>hello,{{name}}</h1>
</div>

2. 创建一个Vue实例

el :用于指定当前Vue实例为按个容器服务，值通常为css选择器字符串。

data：用于存储数据，数据供el所指定的容器去使用，值先暂定先写成一个对象。

 new Vue({el:'#root',data: {name:'lwh'},})

2.1 完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript"></script></head><body><div id="root"><h1>hello,{{name}}</h1></div><script type="text/javascript">new Vue({el:'#root',data: {name:'lwh'},})</script></body>
</html>

3.注意事项

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

（1） a

（2） a+b

（3） demo（1）

（4） x===y ? 'a' : 'b'

1. 一个容器只能被一个Vue实例接管，容器与Vue实例是一一对应的。

2. {{ xxx }} 中的xxx要写 js 表达式，且xxx 可以自动读取到data中的所有属性。

2. 一旦data中的数据发生改变，那么模板中用到改数据的地方也会自动更新

Vue-01 —创建一个Vue实例相关推荐

第三节：创建一个Vue实例，超简单
最近事多,更新稍慢了点,距离第二节推送快一周了. 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么, ...
Vue学习笔记：创建一个Vue实例
目录 1.访问Vue官网https://cn.vuejs.org,进入学习模块下的教程 2.创建页面index.html 3.通过script标签在head部分引入vue.js 4.在body部分创建 ...
404 单页应用报错路由_通过 Laravel 创建一个 Vue 单页面应用（五）
文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t/34858 我们在第4部分完成了编辑用户的功能,并且学习了如何使用 v-model 来监 ...
前端框架之Vue(1)-第一个Vue实例
vue官方文档知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. {var a = 1; } console.info(a); // 1 例1: var arr = []; ...
使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目实例交流前言介绍创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建 ...
从零开始创建一个vue项目 1
从零开始创建一个vue项目创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
安装Vue node 及创建一个Vue 项目
安装Vue 和 node 及创建一个Vue 项目一下载node.js安装包 1 下载资源包,然后安装 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成 3 检测P ...
如何创建一个vue项目
首先要准备好node.js npm,vue-cli 创建一个vue项目,使用脚手架创建具体命令如下 vue init webpack 项目名称然后回车 Project name 项目名称 ( ...
data的值如何初始化vue_vue 创建一个基础实例【02】
学习要点:1.框架理解 2.options 3.生命周期本节课我们来开始学习 Vue 声明对象,并且理解传递选项对象的方法. 一．框架理解 1. 所有的前端框架基本都是为了简化:模版渲染 ...

Vue-01 —创建一个Vue实例

前提

1. 准备一个容器

2. 创建一个Vue实例

2.1 完整代码

3.注意事项

Vue-01 —创建一个Vue实例相关推荐

最新文章

热门文章