vue

Vue是一套用于构建用户界面的渐进式框架。

NPM是随同NodeJS一起安装的包管理工具。

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
   由于npm资源大多需要墙，所以可以切换到淘宝镜像。
   npm install -g cnpm --registry=https://registry.npm.taobao.org
4. 安装vue-cli脚手架构建工具
   cnpm install --global vue-cli
   安装vue-cli3
   cnpm install --g @vue/cli
5. 创建初始化项目
   vue init webpack my-project
6. 运行及打包
   npm run dev |build

目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。vue.config是一个对象，包含vue的全局配置。（silent,optionMergeStrategies,devtools,errorHandler,ignoredElements,keyCodes,）

static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

assets里面的会被webpack打包进你的代码里，而static里面的，就直接引用了。

vue.config.js

插值

1. 文本。
   使用 {{…}}（双大括号）的文本插值。

<div id="app">
  <p>{{ message }}</p>
</div>

2. html
   v-html

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

3. 属性
   v-bind

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

4. 表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

5. 指令
   指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

6. 参数
   参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
    <!-- 缩写 -->
   <a :href="url"></a>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

v-on 指令，它用于监听 DOM 事件。

<a v-on:click="doSomething">  
<!-- 缩写 -->
<a @click="doSomething"></a>

7. 用户输入。
   v-model 指令来实现双向数据绑定。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

8. 过滤器

<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: '12'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return 'error'
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

条件判断
v-if=“true|false”

 <div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

循环语句

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

监听属性
可以通过 watch 来响应数据的变化。

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    },
    watch:{
		counter:function(val){
			dosometing;
		}
	}
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改.

new Vuex.Store({
  state:{},
  actions: {},
  mutaitons: {},
  getters: {},
  modules: {},
  strict: true,
  plugins: []
})

state：vuex中的根状态对象，用来定义共享的状态对象，类似vue实例中的data
actions：状态动作，向store提交调用通知，调用mutaitions中的方法来改变状态，同步、异步操作在这里执行，执行之后提交调用mutations，类似vue实例中的methods，也可以想象成springmvc中的service层，逻辑处理完毕后需要去调用dao完成数据的修改。
mutations：状态改变定义，由actions调用，这里没有负责的逻辑，只负责更改state中的数据，可以想象成springmvc中的dao层。
getters：state数据获取，类似vue中的computes计算属性，比如要获取的是某个state中数组的长度，或者两个属性之和，当然用计算属性比较合适。
modules：state数据的模块，可以理解为命名空间。
strict：true为调试模式，false生产模式。
plugins：向vuex中添加插件。

$state.dispatch(‘action名’，参数列表) 用于组件中触发store的action
$state.commit(‘mutation名’，参数列表) 用于action中调用store的mutation

https://blog.csdn.net/huskle/article/details/81222685

Vue实例，每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的。
Vue构造器，从而用预定义选项创建可复用的组件构造器。

var MyComponent = Vue.extend({
  // 扩展选项
})

// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()