资源引入

vue

<script src="https://s3.cn-north-1.amazonaws.com.cn/h5.taocai.mobi/saas-Dev/js/vue.js"></script>

element-ui

//css
<link rel="stylesheet" href="/resources/common/goods/css/elementUi.css">
//js
<script src="https://s3.cn-north-1.amazonaws.com.cn/h5.taocai.mobi/saas-Dev/js/elementUi.js"></script>

Axios

<script src="https://s3.cn-north-1.amazonaws.com.cn/h5.taocai.mobi/saas-Dev/js/axios.min.js"></script>

起步

//html
<div id="app">
  {{ message }}
</div>
//js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

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

指令

v-if

v-if v-elif 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-for

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

<!--其余写法-->
<div v-for="(item, index) in items" :key="item.id">
{{index}}-{{item.text}}
</div>

<div v-for="(val, key) in object" :key="val">
{{key}}-{{val}}
</div>

<div v-for="(val, name, index) in object" :key="val">
{{index}}-{{name}}-{{val}}
</div>

v-on

<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 传值 -->
<button v-on:click="doThat('hello', $event)"></button>

v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

v-model

在表单控件或者组件上创建双向绑定。

<!-- 输入框 -->
<input v-model="message" placeholder="edit me">
<!-- 文本框 -->
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<!-- 多选框 -->
<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>
<!-- 单选 -->
<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>
<!-- 选择框 -->
 <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
<!-- 配合v-for -->
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

选项/数据

data

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      msg:'hello'
    }
  },
  methods:{
    edit(){
      //修改msg
      this.msg = 'tcm';
    }
  }
})
//外部修改data
app.msg="特朗普";

methods

<div id="app">
   <div>{{a}}</div>
   <button @click="plus">点我</button>
</div>
var app = new Vue({
  el: '#app',
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})

computed 计算属性

<div id="app">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

watch 侦听属性

var vm = new Vue({
  data: {
    a: 1,
  },
  watch: {
    a: function (newVal, oldVal) {
      console.log('new: %s, old: %s', newVal, oldVal)
    },
}

filter 过滤器

<!-- 调用方式 -->
//1、在html中调用
<p>{{num|addZero}}</p>

//2、在函数中调用
methods: {
  add(){
     let newnum =  this.$options.filters.addZero(this.num);
  }
},
filters:{
  addZero(value) {
       return value > 10 ? value : '0' + value;
  });
}

生命周期

// 最常用的是created()和mounted()
var app = new Vue({
  el: '#app',
  beforeCreate(){},   //组件实例刚刚创建，还未进行数据观测和事件配置
  created(){},  //实例已经创建完成，并且已经进行数据观测和事件配置
  beforeMount(){},  //模板编译之前，还没挂载
  mounted(){},   //模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
  beforeUpdate(){},  //组件更新之前
  updated(){},  //组件更新之后
  beforeDestroy(){},  //组件销毁之前
  destroyed(){}  //组件销毁之后
})

Axios

methods: {
  doit(){
    axios.post(url, params)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error)
    })
  }
}

element-ui

地址