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 #传递文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

`<span>Message: {{ msg }}</span>`

{{}}标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，
你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

v-html #传递html元素
v-bind #绑定css属性

数据与方法

<div id="app">
	{{ a }}
</div>

<script type="text/javascript">
	var data = {a:2}
	//响应系统无法再追踪变化。
	// Object.freeze(data),
	var app = new Vue({
		el:"#app",
		data:data
	})
	//可以追踪变量a改变后和改变前的值
	app.$watch('a', function(newVal, oldVal){
		console.log(newVal, oldVal);
	})
	//前缀 $，以便与用户定义的 property 区分开来
	app.$data.a=5
</script>

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>