Vue学习笔记（1）

我是一盘酸菜鱼

环境配置教程

官方教程

环境配置

配置淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装相关环境: node.js、cnpm、vue-cli

npm -g install npm  //更新npm到最新版本

cnpm install wekpack -g  

npm install vue-cli -g 

新建vue项目流程

vue init wekpack-simple <name>  //新建vue项目
npm install //安装项目依赖
cnpm install vue-router vue-resource --save //安装路由模块和网络请求模块
npm run dev

（webstorm好像有点牛逼?验证sysu邮箱可以免费用）

（感觉sublime + livereload好像也差不多）

---

Vue格式

<template> -> html
<script> -> js
<style> -> css

---

简单语法

官网教程

• 基于HTML语法
• 声明式地绑定DOM和底层Vue实例
• 模板编译成虚拟DOM渲染函数（render fun）

###vue文件

• html:

  <template>
    <div id="app">   //div的id属性，用于css编辑，与web一致
  <div id="app-6">
  <p>{{ abc }}</p>   //第一种元素绑定方法，abc为变量名，script中可直接调用（Mustache语法，双大括号）
  <span v-bind:title="new2"> //第二种元素绑定方法，new2为变量名，script中直接调用
  put here
  </span>
  <br/>
  <button v-on:click="change">click here</button>//与方法绑定，跟C#差不多
  </div>
  
    </div>
  </template>
  

• script

export default {
  name: 'app',  //给整个vue组件定义变量名，可调用
  data () { //vue实例中引用到的变量名
    return {
      msg: 'Welcome to Your Vue.js App',
      abc: 'something',
      new2: 'currentTime: ' + new Date().toLocaleString()
}
  },
  methods: { //vue实例中使用到的函数（方法）
    change: function(){
      this.abc = "you"
    }
  }
}

插值

Mustache - 双大括号，绑定的数据对象上msg属性发生改变时，此处改变。

<span>Message: {{ msg }}</span>

使用双大括号会将数据解释成普通文本（如代码)。需要输出真正的HTML，要用v-html指令

<p>Using mustaches: {{ rawHtml }}</p> //输出文本
<p>Using v-html directive: <span v-html="rawHtml"></span></p> //改变样式

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

• ustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的<button>元素中。

（突然发现md好像可以支持部分html， 比如这样 )

vue指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式。vue指令可以直接嵌在html的元素里面中去，也就是直接在元素中加入这一条属性，使用demo如下：

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message"> //双向绑定，vue指令在这里使用
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
message: 'Hello Vue!'
  }
})    

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

一些vue指令：

v-bind:title = "abc"  //将元素节点的title 绑定 data中变量名为abc的变量
v-if="a"  //通过控制a，可以控制元素
v-else-if & v-else //同样的裸绩
v-for = "i in a"   //循环处理a数组中的元素i的属性
v-on:click = "method"  //v-on用于监听DOM事件
//click操作调用method函数 click应该可以替换成其他操作
v-model = "abc"  //实现表单输入(或其它元素）和应用状态之间的双向绑定
v-once //执行一次性地插值

一些指令的属性：

• v-if和v-show
  • v-if只会在指令的表达式返回truthy值的时候渲染，也就是切换过程中条件块内的事件监听器和子组件是会被销毁和重建的
  • 而v-show的元素始终会被渲染并保留在DOM中，它只负责切换元素的css属性display
  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
• v-if和v-for最好不用一起使用，v-for比v-if会具有更高的优先级

• v-for的一些语法

  v-for = "item in items" //遍历数组使用
  v-for = "item of items" //使用of代替in作为分隔符
  v-for = "(item,index) in items"//可选的第二个参数，当前项的索引
  v-for = (value,key) in object //key-value值对
  

其中item是数组元素迭代的别名，items是源数据数组

动态参数

应该就是v-指令后面可以连接一个用方括号括起来的JS表达式（变量名），使得绑定的参数可以更灵活地动态调整。

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href 。

详见教程

一些约束

• 动态参数的值应该是一个字符串，异常状态下是 null。（赋值null可以移除绑定？）
• 语法约束，某些字符（空格、引号）可能无效
• 浏览器会把特性名全部强制转换为小写，使用大写变量可能会出现问题
• 修饰符（半角句号 . 指明的特殊后缀)

E: .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

• 缩写: Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

  <!-- 完整语法 -->
  <a v-bind:href="url">...</a>
  
  <!-- 缩写 -->
  <a :href="url">...</a>
  
  --------------------------
  
  <!-- 完整语法 -->
  <a v-on:click="doSomething">...</a>
  
  <!-- 缩写 -->
  <a @click="doSomething">...</a>
  

Vue实例中js使用

• 可以绑定简单的属性键值
• 包括单个表达式，非语句

 //不生效 * 2
{{var a = 1}}  
{{ if (ok) { return message } }}

---

关于 new vue 和 export default 的区别

---

在main.js当中已经有一个new vue了。作为被main.js import的APP.vue ，App.vue当中应当有export default，这样才能在main.js中引入（也就是import）APP.vue当中的内容。

new vue是生成Vue根实例，而export default则是用来导出的。export default相当于提供一个接口给外界，让外界（这里也就是main.js）来引入使用。

在不使用App.vue 文件时，我们是通过 Vue 构造函数（new vue）创建一个 Vue 根实例来启动vuejs 项目，Vue 构造函数接受一个对象，这个对象有一些配置属性 el, data, component, template 等，从而对整个应用提供支持。

而现在我们的vue项目建好之后，有.vue也有.js，此时，在App.vue文件中，export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象。