Vue起步

第一个项目，使用webstorm搭建vue

https://blog.csdn.net/weixin_40760196/article/details/79952652

vue的插值表达式

可以填数据，表达式，甚至是函数

数据遵循双向绑定，和Angular差不多

vue指令

1.文本显示

• 鼠标悬停提示信息

    <h1 v-bind:title="hint">{{ msg }}</h1>

• 内容文本 innertext

    <h2 v-text="msg"></h2>

• 内容html innerhtml

    <h3 v-html="msg"></h3>

2.条件判断，控制是否显示

• if条件

    <h3 v-if=true>1234545</h3>

• ifelse 条件

<h3 v-if="Math.random()>0.5">显示</h3>
    <h3 v-else>隐藏</h3>

• else-if

    <div v-else-if="type === 'B'">

• 是否show

    <h3 v-show="!is_show">1234545</h3>

if 和 show 的区别

v-if 数据属性对应的值，如果为假，则不在页面中渲染，反之亦然appendChild() removeChild()

v-show 控制dom元素的显示隐藏display:none|block

对于频繁操作的数据，建议使用v-show

• 控制类名也可以进行显示隐藏，原理和v-show相似

v-bind: 缩写 :

    <h3 class="active" v-bind:class="{active:true}">342</h3>

v-bind用于绑定属性

3.事件绑定

• 点击事件 缩写 @click

<button v-on:click="clickHandler">Essential Links</button>

  methods: {
    clickHandler (e) {
      // alert('click')
      console.log('handler click')
      console.log(this) # 就是当前的vue对象
      this.is_show = !this.is_show
    }
  }

4.事件循环

• v-for

  <li v-for="site in sites">
      {{ site.name }}
    </li>

https://www.runoob.com/vue2/vue-loop.html
也可以用来迭代对象，提供key,value键名

使用v-for时一定要加上key(唯一)，以便让diff算法优化虚拟dom，加快渲染速度

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

https://cn.vuejs.org/v2/guide/list.html#维护状态

5.双向绑定

    <input v-model="msg"/>

6.计算属性

• computed

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed 和 method

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

• method 每次重新渲染时都会执行
• 只要当依赖的缓存发生变化时，才会改变

-computed set

https://www.runoob.com/vue2/vue-computed.html

7.监听事件

• watch监听

vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});

nval 前一个值
oval 现在的值

更复杂的调用

<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一个实例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>

8.事件修饰符

事件修饰符
https://www.runoob.com/vue2/vue-forms.html

---

使用组件

• 引入自定义组件的方式

1.全局组件，所有实例都能用全局组件。

// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})

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