初识vue

1.npm是一个包管理器类似于nuget。开始时我们可以像引入jquery一样引入一个js文件进行vue的开发而不必安装node.js后使用npm下载

2.Vue

知道常用的响应式指令和3个常用的钩子函数（created、mounted、updated）就能进行简单的页面实现了，可以算是入门了。以后可以积累经验学习更多的vue特性和用法。可以慢慢积累和探索了不至于是一直懵逼状态。

 

2.1.数据驱动，依托于数据进行dom操作，提倡使用操作数据的方式操作dom。常用的命令符v-for、v-show、v-bind（:）、v-click（@）、v-if

2.2.vue的options参数的el绑定可以试css选择器，也可以是htmlelment

2.3.vue的 v-for指令的格式

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

 

2.4.vue的钩子函数访问远程数据是需要注意赋值的时候this的用法，在远程方法中的this不是vue对象，这个地方是容易出错的地方。

2.5.vue控制样式的小技巧。

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<span :class="{fontColorRed:item.ZXBZ!=1,fontColorGreen:item.ZXBZ==1}">{{item.ZXBZ==1?"[在线]":"[离线]"}}</span>

  <span v-if="item.ZXBZ==1" class="fontColorGreen">{{item.ZXBZ==1?"[在线]":"[离线]"}}</span>

  <span v-else class="fontColorRed">{{item.ZXBZ==1?"[在线1]":"[离线1]"}}</span>

  <span :class="[item.ZXBZ==1?'fontColorGreen':'fontColorRed']">{{item.ZXBZ==1?"[在线]":"[离线]"}}</span>

2.6.vue输出html的方法。v-html，其实不够灵活。不常用

2.7.钩子函数的含义。

created：vue对象创建后执行。我们可以通过它获取到data数据了，并且可以得到一个“假”的HTML，但不会在页面展示，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom

mounted：对象挂载完执行，这个时候响应式数据完成更新，虚拟dom渲染完毕。数据挂载后 mounted 将HTML显示到页面，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

 

2.8.key的使用

在v-for中使用key 在数据变动时可以根据key值判断是否改变防止重复渲染。

在v-if中使用防止被复用，有时复用会导致用户输入数据的残留。

 

 

3.vue操作dom（这种操作方式vue是不建议的，但是有时候我们不得不这么操作）

3.1js基础

var x = document.getElementById("myDIV");
x.querySelector(".demo").innerHTML = "Hello World!";

3.2使用$el

var container = this.$el.querySelector ("#new message");
container.scrollTop = container-scrollHeight;

3.3使用refs

$refs不是响应式的，只在组件渲染完成后才会生效，在初始渲染的时候是不存在的。

所以是动态生成的元素时，要特别注意。特别是使用异步方法从服务器获取数据时。

 

 

 

 

4.请求服务器数据

个人认为这个不是vue思想的核心，使用哪种方式不影响你初始对vue的学习和使用（仅限于对我这样的初学者理解方便而言的），实际使用的时候不太可能使用js原生对象进行访问，也不可能在引入另一个很多人认为过时的jquery框架去实现。

4.1可以使用原生xmlhttpRequest ajax获取数据。

4.2使用jquery封装的对象进行访问

4.3使用vue常用的远程插件访问

 

5.vue的模板使用

5.1.什么是*.vue文件

*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。

 

 

 引入自定义的组件

import conversationList from './modules/conversation-list'

import headerFunBar from './modules/header-fun-bar'

import conversationCurrent from './modules/conversation-current'

 

export default {

   // 这里写你的代码，外面要包起来。

}

 

components: {conversationList, headerFunBar, conversationCurrent}

 

import Vue from 'vue';  //import Vue from "../node_modules/vue/dist/vue.js";直接写模块名的这种。只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找

import App from './App';//可以加载各种各样的文件：.js、.vue、.less等等

import router from './route';//可以省略掉from直接引入

import axios from 'axios';

import './less/index';

 

6.vue脚手架

 ...

7.vscode使用git

...