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-cli
cnpm 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-project
cnpm install
cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080


# 通过任意浏览器访问 http://localhost:8080 即可
下一步

对应的目录结构如下：

目录/文件说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
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 id="app">
    <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 id="app">
  <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>

 

posted @ 2018-02-17 22:40  病毒尖er  阅读(234)  评论(0)  编辑  收藏  举报