vue重点难点

vue重点难点
1.安装环境以及初始化单页项目
(1)安装node.js node中会自带npm
(2)网络不好时可用cnpm代替npm cnpm install npm -g
(3)安装vue cnpm install vue
(4)安装vue-cli，用于快速搭建大型单页应用 cnpm install --global vue-cli
(5)初始化vue项目 vue init webpack my-project
(6)安装依赖包 cnpm install
(7)运行项目 cnpm run dev
(8)编译项目,编译项目后在dist文件夹下 cnpm run build
2.MVVM
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
3.vue数据绑定
(1)插值绑定
文本插值–{{value}} data中声明变量value

html插值<div v-html="innerhtml"></div>  

data中声明变量用于存储html数据 innerhtml=<h1>这是一个标题</h1>
(2)属性绑定
v-bind指令 dom节点属性基本都可以用v-bind进行绑定

<div v-bind:class="className" v-bind:title="title"></div> 
<button v-bind:disabled="10+10==20"></button>
 <input v-bind:tyep="'text'"></input>

v-bind可以省略 例如

<p :class="className" :title="title"></p>

(3)事件绑定

v-on <button v-on:click="handle()">click</button> 

也可简写为

<button @click="handle()">click</button>

按键

 <input type="text" @keyup.enter="handle()"></input>

(4)双向绑定

<input type="text" v-model="inputText"></input>

(5)条件及列表
v-if v-show v-if无实际dom节点 v-show存在dom节点，只是display:none
v-if

<h1 v-if="true">This is tittle</h1>

v-if v-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

v-for

<ul>
		<li v-for="(value, key) in lists">
		{{ key }} : {{ value }}
		</li>
	</ul>

4.声明周期

beforeCreate: function() {
console.group(‘beforeCreate-------’);
},
created: function() {
console.group(‘reated-----’);
},
beforeMount: function() {
console.group(‘beforeMount-------’);
},
mounted: function() {
console.group(‘mounted------’);
},
beforeUpdate: function () {
console.group(‘beforeUpdate-----------’);
},
updated: function () {
console.group(‘updated---------------’);
},
beforeDestroy: function () {
console.group(‘beforeDestroy---------------------’);
},
destroyed: function () {
console.group(‘destroyed -------------------’);
}

5.使用外部组件
(1)js中引入子组件 import child from “child”
(2)components中声明 components: {TreeGraph}
(3)使用子组件
6.组件间传值
(1)js中引入子组件 import child from “child”
(2)components中声明 components: {TreeGraph}
(3)使用子组件
(4)子组件通过props获取值 props: {data: Array}
(5)使用data {{data}} this.data
7.路由
(1)通过npm安装vue-router
(2)新建router.js import VueRouter from ‘vue-router’
(3)

 Vue.use(VueRouter)
	export default new VueRouter({
		routes: [
			{
				path: '/parent',
				name: 'parent',
				component: parent
			},
			{
				path: '/parent1',
				name: 'parent1',
				component: parent1,
				children: [
					{
						path: '/child',
						name: 'child',
						component: child
					} 
				]
			},
		]
	}) 

(4)引入路由import router from ‘./router’
(5)

 new Vue({
	  el: '#app',
	  router,
	  components: { App },
	  template: '<App/>',
	  created() {
	  }
	})

(6)页面使用路由

<router-link to="/parent">路由测试</router-link>
  <div><router-view></router-view></div>

8.获取接口资源

npm install axios
axios
      .get('url')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
 axios
      .post("url", postJson)
      .then(response => {
        if (response.status == 200) {
            );
          });
        }
      })

9.vuex