Vue的安装及基本语法简单DEMO
安装
一、通过CDN的方式下载到本地或直接引用此链接嵌入到 script 标签中（开发模式尽量不要选用压缩版，没有报错信息提示），链接如：https://cdn.bootcss.com/vue/2.5.13/vue.common.js
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Vue使用</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.common.js"></script>
</body>
</html>
View Code
二、通过 npm 方式安装 Vue
由于 npm 安装速度慢，本案例使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：
# 安装 cnpm 前提是 npm 的版本需求大于3.0, 如果低于此版本需要升级它：# 查看版本
npm -v
# 升级 npm
cnpm install npm -g
# 使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 完成之后, 那么可使用 cnpm 安装模块了
cnpm install [packageName]
cnpm安装
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：cnpm install vue
命令行工具Vue-cli（在进行简单的练习可以不用此工具）
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
# 全局安装 vue-clicnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
上一步
cd my-projectcnpm install
cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
# 通过任意浏览器访问 http://localhost:8080 即可
下一步
对应的目录结构如下：
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
使用
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div >
<p>{{ a }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button @click="a = 'baz'">Change it</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
// 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
var data = {a: 1};
var vm = new Vue({
// 选项
el: "#app",
data: data
});
// 1、数据绑定
/*
* 数据与方法
* 获得这个实例上的属性
* 返回源数据中对应的字段
* 设置属性也会影响到原始数据
*/
vm.a = 2;
console.log(data.a); // => 2
/*
* ……反之亦然
* data.a = 3;
* vm.a // => 3
*/
// 2、数据声明
/*
* 注: 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的
* 那么现在添加一个新的属性, 比如:
*/
vm.b = 'liuzhichao';
/*
* 那么对 b 的改动将不会触发任何视图的更新, 所以知道在晚些时候需要一个属性
* 那么要设置一些初始值, 即在 data 里面声明它
*/
// 3、阻止修改数据属性
/*
* 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化
*/
Object.freeze(data); // 数据在声明之前 应执行此方法
// 4、数据监听
/*
* 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法
* 它们都有前缀 $，以便与用户定义的属性区分开来
*/
console.log(vm.$data === data); // => true
console.log(vm.$el === document.getElementById('example')); // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
console.log(newValue, oldValue);
});
vm.a = 6 // 会调用对应的数据改变的 回调方法
</script>
</body>
</html>
实例生命周期钩子
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Vue实例生命周期钩子</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div >
<p>{{ message }}</p>
</div>
<script>
// 1、生命周期
/*
* 每个 Vue 实例在被创建时都要经过一系列的初始化过程, 例如:
* 需要设置数据监听
* 编译模板
* 将实例挂载到 DOM 并在数据变化时更新 DOM
* 等等
*
* 同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
* 不懂钩子的童鞋可以这样理解:
* 钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字
* 特定的钩子去做特定的事情
*
* 那么Vue钩子函数如下所示:
*
* `beforeCreate` 组件实例刚刚被创建, 组件属性计算之前, 如 `data` 属性等
* `created` 组件实例创建完成、属性已绑定, 但DOM还未生成, `$el` 属性还不存在
* `beforeMount` 模板编译/挂载之前
* `mounted` 模板编译/挂载之后
* `beforeUpdate` 组件更新之前, 属性值更新等
* `updated` 组件更新之后, 属性值更新等
* `activated` for `keep-alive`, 组件被激活时调用
* `deactivated` for `keep-alive`, 组件被移除时调用
* `beforeDestroy` 组件实例销毁前调用
* `destroyed` 组件实例销毁后调用
*
* 直接 copy 最下方代码 即可调试
*
* 更新操作
* `vm.message = 1`
*
* 销毁操作
* `vm.$destroy()` 销毁完成后, 后续便不再受Vue控制
*
* 总结:
*
* beforeCreate : 举个栗子：可以在这加个loading事件
* created ：在这结束loading，还做一些初始化，实现函数自执行
* mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
* beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
*
*/
var vm = new Vue({
el: '#app',
data: {
message: "vue id good"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
}
})
</script>
</body>
</html>
以上是 Vue的安装及基本语法简单DEMO 的全部内容， 来源链接： utcz.com/z/377176.html
