Vue学习笔记

简介

Vue.js是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

创建vue项目

vue init webpack vue_demo

Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：n
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（测试相关）：n
Should we run npm install for you after the project has been created? (recommended)：选择：No, I will handle that myself

cd vue_demo         //进入项目
npm install         //初始化项目 

npm run dev             //运行项目

浏览器打开：http://localhost:8080，即可打开vue项目首页

目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，90%操作都在这个目录。包括子的目录有：1、assets: 放置一些图片2、components: 放置组件代码文件3、App.vue项目入口文件 4、main.js 项目的核心文件
static	静态资源目录，如图片、字体等
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的
package.json	项目配置文件
README.md	项目的说明文档，Markdown 格式

Vue实例

var vm = new Vue({
  // 选项
})

实例如下：

<div id="L_id">
    <h1>name : {{name}}</h1>
    <h1>age : {{age}}</h1>
    <h1>{{talk()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#L_id',
        data: {
            name: "L",
            age: 18
        },
        methods: {
            talk : function() {
                return  "Hi! boy ";
            }
        }
    })
    document.write(vm.name) //数据引用方式
    document.write(vm.talk())//方法调用方式
</script>

实例参数：

• id ：定义id(L_id)
• data(属性):定义属性(name,age)
• methods:定义方法（talk）
• {{ }}:用于输出对象属性和函数返回值
• . :调用方式

vue.js模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上

文本插值

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

HTML插值

使用 v-html 指令用于输出 html 代码

<div id="app">
    <div v-html="message"></div> // v-html 指令用于输出html代码
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hi!</h1>'
  }
})
</script>

属性插值

HTML 属性中的值应使用 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>

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

<div id="app">
	{{5+5}}<br>
	{{ test ? 'YES' : 'NO' }}<br>
	{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
	test: true,
    message: 'TESTAPP',
  }
})
</script>

指令

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

<div id="app">
    <p v-if="seen">Can you see me?</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应

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

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下

<!-- 在两个大括号中 -->
{{ value | filterA }} 或 {{ value | filterA | filterB }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="value | filter"></div>

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

缩写

Vue.js为两个最常用的指令提供了特别的缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

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

Vue.js条件语句

条件判断使用 v-if 指令，v-else 指令可给给 v-if 添加一个 “else” 块

<div id="app">
    <div v-if="Math.random() > 0.6">
      good!
    </div>
    <div v-else>
      Bad!
    </div>
</div>
<script>
new Vue({
  el: '#app'
})
</script>

循环语句

循环使用 v-for 指令
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'baudi' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

Vue.js计算属性

计算属性关键词: computed， computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Baidu',
    url: 'http://www.baidu.com'
  }
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
vm.site = 'Google http://www.google.com';

Vue.js 监听属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化

<div id = "app">
    <p>计数器: {{ counter }}</p>
    <button @click = "counter++">Click it</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(new_value, old_value) {
    alert('计数器值的变化 :' + old_value + ' 变为 ' + new_value + '!');
});
</script>

Vue.js 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组

<style>
.active {
	background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true     // 实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示
  }
})

事件监听 v-on 指令

事件监听可以使用 v-on 指令

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

Vue.js 表单

可以用 v-model 指令在表单控件元素上创建双向数据绑定
输入框

<div id="app">
  <p> input 元素：</p>
  <input v-model="message">  // 修改输入内容，消息也会改变
  <p>消息是: {{ message }}</p>
  </div>
<script>
new Vue({
  el: '#app',
  data: {
    message: ‘csdn',
  }
})
</script>

单选框

<div id="app">
  <p>单选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>  // 选中变成false，不选为相反：true
</div>
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
  }
})
</script>

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

注册一个全局组件语法格式如下

Vue.component(componentName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

全局组件

<div id="app">
    <componentName></componentName>
</div>
<script>
// 注册
Vue.component('componentName', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

局部组件

也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用

<div id="app">
    <componentName></componentName>
</div>
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'componentName': Child
  }
})
</script>

Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点

<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

也可以在实例使用 directives 选项来注册局部指令

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

钩子函数

指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有：

• el: 指令所绑定的元素，可以用来直接操作 DOM
• binding: 一个对象，包含以下属性：
  • name: 指令名，不包括 v- 前缀
  • value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
  • expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }
• vnode: Vue 编译生成的虚拟节点
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

<div id="app"  v-baidu:hello.a.b="message">
</div>
<script>
Vue.directive('baidu', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'ww.baidu.com‘
  }
})
</script>

Vue.js路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
安装依赖

npm install vue-router

声明式导入

import Router from 'vue-router'

Vue.js + vue-router 可以很简单的实现单页应用
是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

<router-link> 的属性

• to:表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
• replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录
• append:设置 append 属性后，则在当前 (相对) 路径前添加基路径。
• tag:有时候想要 渲染成某种标签，例如 <li>, 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
• active-class:设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代
• exact-active-class:配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代
• event:声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组

Vue.js 过渡 & 动画

过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件
语法格式

<transition name = "nameoftransition">
   <div></div>
</transition>

<div id = "databinding">
<button v-on:click = "show = !show">Click me</button>
<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
    data: {
        show:true,
        styleobj :{
            fontSize:'30px',
            color:'red'
        }
    },
    methods : {
    }
});
</script>

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换

• v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

Vue.js混入

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。注意！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑，使用不恰当时，会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

局部混入

var vm = new Vue({
    el: '#databinding',
    data: {
    },
    methods : {
    },
});
// 定义一个混入对象
var myMixin = {
    created: function () {
        this.startmixin()
    },
    methods: {
        startmixin: function () {
            document.write("欢迎来到混入实例");
        }
    }
};
var Component = Vue.extend({
    mixins: [myMixin]
})
var component = new Component();

全局混入

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
new Vue({
  myOption: 'hello!'
})
// => "hello!"

Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
安装方法

npm install axios

引用方法

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

或

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

GET 方法

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

POST方法

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

POST传递参数格式如下

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios API
可以通过向 axios 传递相关配置来创建请求

axios(config)
// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//  GET 请求远程图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// 发送 GET 请求（默认的方法）
axios('/user/12345');

也可用以下别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])