Vue -渐进式JavaScript框架

//创建一个项目vue create your-app

<div id="app">{{ msg }}div>
<script src="vue.js">script>
<script>  var vm = new Vue({    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标    el: '#app',    // Vue 实例的数据对象，用于给 View 提供数据    data: {      msg: 'Hello Vue'    }  })script>

var vm = new Vue({  data: {    msg: '大家好，...'  }})
vm.$data.msg === vm.msg // true

<h1>Hello, {{ msg }}.h1><p>{{ 1 + 2 }}p><p>{{ isOk ? 'yes': 'no' }}p>
<h1 title="{{ err }}">h1>

/*  defineProperty语法 介绍 */var obj = {}Object.defineProperty(obj, 'msg', {  // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值  set: function (newVal, oldVal) {  },  // 读取 obj.msg 时get方法会被系统调用  get: function ( newVal, oldVal ) {}})

<input type="text" id="txt" /><span id="sp">span>
<script>var txt = document.getElementById('txt'),    sp = document.getElementById('sp'),    obj = {}
// 给对象obj添加msg属性，并设置setter访问器Object.defineProperty(obj, 'msg', {  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  set: function (newVal) {    // 当obj.msg被赋值时 同时设置给 input/span    txt.value = newVal    sp.innerText = newVal  }})
// 监听文本框的改变 当文本框输入内容时 改变obj.msgtxt.addEventListener('keyup', function (event) {  obj.msg = event.target.value})script>

var vm = new Vue({  data: {    stu: {      name: 'jack',      age: 19    }  }})
/* Vue.set */Vue.set(vm.stu, 'gender', 'male')
/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

methods: {  fn() {    this.msg = 'change'    this.$nextTick(function () {      console.log('$nextTick中打印：', this.$el.children[0].innerText);    })    console.log('直接打印：', this.$el.children[0].innerText);  }}

<h1 v-text="msg">h1>

<h1 v-html="msg">h1>

<a v-bind:href="url">a><a :href="url">a>

<a v-on:click="doSomething">a><a @click="doSomething">a>

<input type="text" v-model="message" placeholder="edit me"><p>Message is: {{ message }}p>

<div v-for="item in items">  {{ item.text }}div>
<p v-for="(item, index) in list">{{item}} -- {{index}}p><p v-for="(item, key, index) in obj">{{item}} -- {{key}}p><p v-for="item in 10">{{item}}p>

for="item in items" :key="item.id">div>

<div v-bind:class="{ active: true }">div> ===> 解析后<div class="active">div>
<div :class="['active', 'text-danger']">div> ===>解析后<div class="active text-danger">div>
<div v-bind:class="[{ active: true }, errorClass]">div> ===>解析后<div class="active text-danger">div>

--- style ---<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }">div><div v-bind:style="[baseStyles, overridingStyles]">div>

<p v-show="isShow">这个元素展示出来了吗？？？p><p v-if="isShow">这个元素，在HTML结构中吗？？？p>

<span v-pre>{{ this will not be compiled }}span>

<span v-once>This will never change: {{msg}}span>

Vue.filter('filterName', function (value) {  // value 表示要过滤的内容})

<div>{{ dateStr | date }}div><div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}div>
<script>  Vue.filter('date', function(value, format) {    // value 要过滤的字符串内容，比如：dateStr    // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'  })script>

{  data: {},  // 通过 filters 属性创建局部过滤器  // 注意：此处为 filters  filters: {    filterName: function(value, format) {}  }}

// 只有在 keyCode 是 13 时调用 vm.submit()@keyup.13="submit"// 使用全局按键别名@keyup.enter="add"
---
// 通过全局 config.keyCodes 对象自定义键值修饰符别名Vue.config.keyCodes.f2 = 113// 使用自定义键值修饰符@keyup.enter.f2="add"

new Vue({  data: { a: 1, b: { age: 10 } },  watch: {    a: function(val, oldVal) {      // val 表示当前值      // oldVal 表示旧值      console.log('当前值为：' + val, '旧值为：' + oldVal)    },
    // 监听对象属性的变化    b: {      handler: function (val, oldVal) { /* ... */ },      // deep : true表示是否监听对象内部属性值的变化      deep: true    },
    // 只监视user对象中age属性的变化    'user.age': function (val, oldVal) {    },  }})

var vm = new Vue({  el: '#app',  data: {    firstname: 'jack',    lastname: 'rose'  },  computed: {    fullname() {      return this.firstname + '.' + this.lastname    }  }})

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可// 1 引入 axios.js// 2 直接调用axios提供的API发送请求created: function () {  axios.get(url)    .then(function(resp) {})}
---// 配合 webpack 使用方式如下：import Vue from 'vue'import axios from 'axios'// 将 axios 添加到 Vue.prototype 中Vue.prototype.$axios = axios
---// 在组件中使用：methods: {  getData() {    this.$axios.get('url')      .then(res => {})      .catch(err => {})  }}
---// API使用方式：
axios.get(url[, config])axios.post(url[, data[, config]])axios(url[, config])axios(config)

const url = 'http://vue.studyit.io/api/getnewslist'// url中带有query参数axios.get('/user?id=89')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });
// url和参数分离，使用对象axios.get('/user', {  params: {    id: 12345  }})

// 使用 qs 包，处理将对象序列化为字符串// npm i -S qs// var qs = require('qs')import qs from 'qs'qs.stringify({ 'bar': 123 }) ===> "bar=123"axios.post('/foo', qs.stringify({ 'bar': 123 }))
// 或者：axios.post('/foo', 'bar=123&age=19')const url = 'http://vue.studyit.io/api/postcomment/17'axios.post(url, 'content=点个赞不过份')
axios.post('/user', qs.stringify({    firstName: 'Fred',    lastName: 'Flintstone'  }))  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });

// 设置请求公共路径：axios.defaults.baseURL = 'http://vue.studyit.io'

// 请求拦截器axios.interceptors.request.use(function (config) {    // 所有请求之前都要执行的操作
    return config;  }, function (error) {    // 错误处理
    return Promise.reject(error);  });
// 响应拦截器axios.interceptors.response.use(function (response) {    // 所有请求完成后都要执行的操作
    return response;  }, function (error) {    // 错误处理    return Promise.reject(error);  });

// 第一个参数：指令名称// 第二个参数：配置对象，指定指令的钩子函数Vue.directive('directiveName', {  // bind中只能对元素自身进行DOM操作，而无法对父级元素操作  // 只调用一次 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。  bind( el，binding, vnode ) {    // 参数详解    // el：指令所绑定的元素，可以用来直接操作 DOM 。    // binding：一个对象，包含以下属性：      // name：指令名，不包括 v- 前缀。      // value：指令的绑定值，等号后面的值 。      // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。      // expression：字符串形式的指令表达式 等号后面的字符串 形式      // arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。      // modifiers：指令修饰符。例如：v-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。    // vnode：Vue 编译生成的虚拟节点。。    // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。  },  // inserted这个钩子函数调用的时候，当前元素已经插入页面中了，也就是说可以获取到父级节点了  inserted (  el，binding, vnode ) {},  //  DOM重新渲染前  update(el，binding, vnode,oldVnode) {},  // DOM重新渲染后  componentUpdated ( el，binding, vnode,oldVnode ) {},  // 只调用一次，指令与元素解绑时调用  unbind ( el ) {    // 指令所在的元素在页面中消失，触发  }})// 简写 如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子:Vue.directive('自定义指令名', function( el, binding ) {})// 例：Vue.directive('color', function(el, binding) {  el.style.color = binging.value})// 使用 注意直接些会被i成data中的数据“red” 需要字符串则嵌套引号"'red'"
"'red'">p>

var vm = new Vue({  el : "#app",  directives: {    directiveName: { }  }})

// 1 注册全局组件Vue.component('my-component', {  // template 只能有一个根元素  template: '
A custom component!
',  // 组件中的 `data` 必须是函数 并且函数的返回值必须是对象  data() {    return {      msg: '注意：组件的data必须是一个函数！！！'    }  }})
// 2 使用：以自定义元素的方式
"example">  <my-component>my-component>div>
// =====> 渲染结果
"example">  <p>A custom component!p>div>

// 3 template属性的值可以是：  - 1 模板字符串  - 2 模板id  template: '#tpl'