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>