vue.JS教程

npm常用命令

添加用户
npm adduser
添加镜像
npm config set registry https://registry.npm.taobao.org 添加淘宝的镜像
删除镜像
npm config delete registry 删除镜像
npm config edit 打开配置文件，手动编辑删除

npm安装模块
【npm install】 根据package.json文件安装
【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
【npm install -g xxx】利用npm安装全局模块xxx；
【npm install xxx】安装但不写入package.json；
【npm install xxx –save】 安装并写入package.json的”dependencies”中；
【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。

npm 删除模块
【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；
npm更新模块
【npm update -g XXX】全局更新模块
【npm update XXX】本地更新模块
查看已安装的模块
【npm ls】查看所有已安装的模块
执行脚本
【npm run】 在package.json的scripts中定义的脚本命令
发布 - 了解
【npm login】 登录
【npm init】 初始化
【npm publish】发布
【npm -f unpublish】撤销发布

安装cnpm

1、安装cnpm，输入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli脚手架

使用 npm

npm install -g @vue/cli

或者使用淘宝npm镜像源

cnpm install -g @vue.cli

安装webpack

使用 npm

npm install -g webpack

或者使用淘宝npm镜像源

cnpm install -g webpack

使用vue命令创建vue项目

vue create 项目名

或者

vue create 项目名 --default

运行vue项目：
1、选择左下角的npm
2、点击server
3、出现访问的连接，点击访问。

二、vue的组件结构

一个vue组件主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style

<template>
    <div class="class_1">
      <h2>{{msg}}</h2>
      这是一个fry VueComponentTest
    </div>
</template>

<script>
  export default {
    name: 'FryTest',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style scoped>
  .class_1{
    color: red;
  }
</style>

script基本结构

<script>
export default {
  name: "App",
  data() {//数据定义 函数方法，返回数据的方式
    return {};
  },
  methods: {
    // 组件的方法
  },
  watch: {
    // watch监听方法，擅长处理的场景：一个数据影响多个数据 
watch是去监听一个值的变化，然后执行相对应的函数。
  },
  computed: {
    // computed擅长处理的场景：一个数据受多个数据影响 
computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  },
  beforeCreate () {
    // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  },
  created () {
    // （在实例创建完成后被立即调用。实例已经创建完成之后被调用。
在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，
 watch/event 事件回调。然而，挂载阶段还没开始，
$el 属性目前不可见。初始化数据请求写这里
  },
  beforeMount () {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。
  },
  mounted () {//页面初始化方法
    // 编译好的HTML挂载到页面完成后执行的事件钩子
 初始化数据除非有依赖dom的放在mounted()里面，加个nextTick
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
    console.log("Home done");
  },
  beforeUpdate () {
    // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
 // 只有更新和模板发生关联的数据才会触发这个钩子
 // 和模板绑定的数据更新之前
  },
  updated () {
    // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
    // 该钩子在服务器端渲染期间不被调用。
  },
  beforeDestroy () {
    // 实例销毁之前调用。在这一步，实例仍然完全可用。一般用于清除定时器
    //$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);   })
  },
  destroyed () {
    // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
  }
};
</script>

第一个小例子

1、创建一个html文件
2、创建一个vue.js文件，将vue的代码中复制进来
3、引用vue.js（可用本地、可用网络）

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

4、创建一个div层，vue用{{变量}}来传递数据

<div id = "app">
    <h1>{{msg}}</h1>
</div>

5、定义一个vue对象：
el：用来绑定div层的id
data：用来传递数据

 <script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:"hello, 测开大佬们！"
        }
    })
</script>

实际效果如图：
常用的页面元素传递方法：
v-text #传递文本
v-html #传递html元素
v-bind #绑定css属性