vue.js 的使用

Vue的核心库只关注视图层,实现页面和数据之间的双向绑定,所以构建对象后需要 el: 关联标签

vue.js 的基本使用

相关链接：
文档地址: https://cn.vuejs.org/v2/guide/
vue.js文件地址: https://cn.vuejs.org/v2/guide/installation.html

创建对象
使用前先导入下载好的 js

<script type="text/javascript" src="js/vue.min.js"></script>
<script>
	// 创建vue对象
    var vm = new Vue({
		// 关联页面标签
        el:'#app',
        data:{message:'hello world!'}
    });
}
</script>

html部分:
<div id="app">{{ message }}</div>

插入
: 页面中获取data数据的值
v-bind:属性A: 给标签的属性设置值
属性A指的是该标签的固定属性,比如class, id,或者href等

v-if: 表示分支语句
v-if = '条件' 后面跟的是条件,条件成立显示否则不显示
v-for: 表示循环语句
v-for='变量 in 容器' : 依次遍历容器中的内容
v-on:click = "事件": 表示绑定点击事件
v-on:事件 :绑定的是该标签的事件,比如,点击事件,鼠标事件

data:{
 message: 'Hello',
 book:{
 name:'b'}
 }
// data 里面存放调用的数据

computed:{
方法：function(参数){
return 参数}
}
// computed 放置计算属性的方法

methods:{
方法：function(){
return }
}
// methods 放置c=方法

watch:{
要侦听的属性：function(newval， oldval){
属性变化后执行的操作}
}
// watch 侦听属性

filters:{
方法:function(value){
if(value=='xx'){
	return  'xxx';
}
	return '￥' + value;
},
}
// filter 过滤器

class 绑定

可以给v-bind:class传一个对象，以动态的切换class

<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>


data: {
  isActive: true,
  hasError: false
}

===========================================
// 直接传对象
<div v-bind:class="classObject"></div>


data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}


==============================================
// 传数组
<div v-bind:class="[activeClass, errorClass]"></div>


data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

style 绑定

<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>

// data数据如下：

data: {
  activeColor: 'red',
  fontSize: 30
}

==============================
// 传对象引用
<div v-bind:style="styleObject"></div>
// data数据如下：

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

================================
// 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
v-if v-else v-else-if 用法跟常规条件判断差不多，要多个连用的话 要紧跟上一个，不然无法识别。

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

v-show 用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的：

<h1 v-show="ok">Hello!</h1>

列表渲染

// index 是索引

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

===========================
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: ['foo','bar']
  }
})

事件处理 v-on

简单指令放在指令， 复杂的放在 methods

 // 简单的直接放在指令
 <div id="example-1">
  <!-- 在指令中写处理逻辑 -->
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
......
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

===========================

<div id="example-2">
  <!-- greet 是在下面定义的方法名 -->

  <button v-on:click="greet">Greet</button>
</div>
........

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function () {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
    }
  }
})

表单输入绑定

可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

文本框

单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

============================================
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

1.单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

2。多个复选框，绑定到同一个数组：

<div id='example-3'>
  <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: {{ checkedNames }}</span>
</div>

......

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

单选框

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

......
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

下拉框

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
......

new Vue({
  el: '...',
  data: {
    selected:''
  }
})

过滤器

实际是一个函数，被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ prize | RMB }}

<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>

全局过滤器，全局能用

Vue.filter('Yuan',function(value){
  if(value=='')
  {
    return;
  }
  return value+'元';
});

实例的生命周期

生命周期钩子

beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始

beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted
实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。

beforeUpdate
数据发生变化前调用

updated
数据发生变化后调用

数据交互

vue.js 需要下载 axios.js 来完成 ajax 的交互

axios库的下载地址：https://github.com/axios/axios/releases

axios完整写法：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

执行get请求

// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

执行post请求

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

ES6 语法

变量声明let和const
let 和 const 是新增的声明变量的开头的关键字，

var 声明变量会预解析，直接在最前面初始化为undefined。
const定义的变量不可修改,const定义的变量是常量。

箭头函数

// 通过箭头函数的写法定义
var fnRs = (a,b)=>{
    var rs = a + b;
    alert(rs);
}        
// fnRs(1,2);

// 一个参数可以省略小括号
var fnRs2 = a =>{
    alert(a);
}
fnRs2('haha!');

// 箭头函数的作用，可以绑定对象中的this
var person = {
    name:'tom',
    age:18,
    showName:function(){
        setTimeout(()=>{
            alert(this.name);
        },1000)            
    }
}
person.showName();

this 总是指向词法作用域，也就是外层调用者 person, 如果没用箭头函数，this 指向window或undefined。