Vue Framework

6/19

0. Little Research

1. vue-cli has some different templates such as webpack, webpack-simple and so on. Use vue list to list all available official templates. The useful template I used is wepack which is a full-featured version.
2. vue upload module: First the file handle need to be caught and then submit the post type method to connnect the server.
3. I have used a plugin to offer a editor for users to upload bulletins. Tinymce. The tinymce-vue is not free so I use a intergrated editor from others on the Internet.

1. MVVM模式

Vue use MVVM model which means Model, View and Viewmodel. Model means data. View means UI and viewmodel means tha logic between them. View and viewmodel communicaates with each other by data binding. While viewmodel and model communicates with each other by notification.

2. Vue.js Common commands

• v-model: 在表单元素创建双向数据绑定 <input type="text" v-model="message"/>
• v-if: 条件渲染指令，可以通过布尔变量判断。 <h1 v-if="yes">Yes!</h1>
• v-show: 只渲染css的style属性，这个标签会一直存在于DOM中，如果设置为false，只是样式会消失。
• v-else: 跟在v-if/v-show之后。
• v-for:渲染一个列表。可以使用template标签实现只循环里面的内容。v-for="(i,index) in character"。
• v-bind:argument=”expression”:argument可以是class、src等，参数可以使各种变量，通过绑定变量即时反应值得变化。
• v-on:监听DOM事件，事件发生后通过帮顶一个方法或者内联语句实现调用。可以用@进行缩写。
• v-html:用于插入一段纯HTML代码。
• this
  • this.$refs可用于将

3.组件

3.1 步骤

• 创建组件构造器Vue.extend()
• 注册组件Vue.component()
• 使用组件

3.2 全局注册和局部注册

全局注册：Vue.component()

局部注册：只能在指定实例中使用

new Vue({
	el: '#app',
  	components: {
   'my-component' : myComponent
   }
});

3.3 父子组件

var Parent = Vue.extend({
// 在Parent组件内使用<child-component>标签
	template :'<p>This is a Parent component</p><child-component></child-component>',
   components: {
// 局部注册Child组件，该组件只能在Parent组件内使用
   'child-component': Child
    }
}) 

3.4 组件注册语法糖

简化过程：Vue.components第一个参数是标签名称，第二个参数是选项对象。这种方式将自动调用Vue.extend()。

Vue.component('my-component1',{
template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
 	el: '#app1'
})        

3.5 使用props

props把父组件的数据传递给子组件。

• 绑定类型
  • 单项绑定：父组件修改传递给子组件，子组件修改不影响父组件
  • 双向绑定.sync：子组件修改的数据会回传给父组件
  • 单次绑定.once:父组件修改不影响子组件

7/7

vue-cli是一个脚手架（即已经搭建好的框架，直接在对应文件里增加代码即可补充）。其中父组件是App.vue，里面分为template、script和style分别对应页面版面、数据结构（data）或组件（component）或函数（method）和CSS。其余子组件房子啊/scr/components文件夹下。

1. ESlint是QA（quality assurance）质量保证工具，用于避免低级错误和统一代码风格。如缩进空2格、函数名和括号之间空一格等。具体标准： https://github.com/standard/standard/blob/master/RULES.md#javascript-standard-style

2. 组件应用模板

    <div id="app">
   

</div>

7/11

1.构造器

拓展组件：

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

The squence to start a vue project is from index.html->main.js->App.vue.

2.属性与方法

Vue实例：代理data属性、$data、$el、$watch

3.实例生命周期

4.计算属性

• method和computed的区别：每次重新渲染method都会再次执行相关函数；computed计算属性依赖缓存。
• watched和computed的区别：数据跟随其他数据变动时，watched是使用命令式函数回调，computed是则是构造通用函数，更加简洁。
• 计算属性有getter和setter

5.Class和Style绑定

• 绑定HTML类：v-bind:class=”{}”
• 绑定内联样式：v-bind:style=”{}”

6.条件渲染

• v-if/v-else

• 复用元素：通过key使得变换placeholder时输入内容会删除

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
  

• v-if/v-show：v-if是条件渲染，只在条件为真时才渲染；v-show总是渲染，只是通过CSS进行变换是否显示。

7.列表渲染

v-for：可选的第二参数作为当前项的索引

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

数组更新检测，修改方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

新旧数组替换：

• filter()
• concat()
• slice()

8.事件处理器:

v-on:click

• 事件修饰符：

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
  

• 键值修饰符

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

9.表单控件绑定

• 文本

    <input v-model="message" placeholder="edit me">
    <p>Message is: </p>
  

• 多行文本

    <span>Multiline message is:</span>
    <p style="white-space: pre-line"></p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
  

• 复选框

HTML：

	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames">
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	<label for="mike">Mike</label>
	<br>
	<span>Checked names: </span>

JS：

	new Vue({
	  el: '...',
	  data: {
	    checkedNames: []
	  }
	})

• 单选按钮
• 选择列表
• 详见：http://cn.vuejs.org/v2/guide/forms.html

显示输出:console.log()

组件

• 父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

8/8

1. axios实现restful api
2. 更新/安装vue库：npm install vue-loader
3. 遇到axios文档中的例子不符合ES6标准，修改代码

 const vm = this;
 // console.log(`ttt, ${this.$http.get('/api/info')}`);
 this.$http.get('/api/info')
 .then((res) => { vm.axios = res; })
 .catch(err => console.log(err));

#修改config/index.js
proxyTable: {
  '/api': {
    target: 'http://192.168.10.10/',
    changeOrigin: true
  }
}

​

1. We can use style scoped to restrict the css to just set for the current component.