wsjls-zw：4、vue base

vue是一套用于构建用户界面的渐进式框架

响应式前端视图层框架

框架  库提供调用的功能，框架定义整个应用程序设计，框架以某种特定方式调用和使用代码

简单的demo

<div>
  <p>Message is: {{ message }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello world'
    }
  });
</script>

<div id="app">
    <input v-on:input="onInput" v-bind:value="message">
    <p>Message is: {{ message }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello world'
    },
    methods: {
      onInput(e) {
        this.message = e.target.value;
      }
    }
  });
</script>

引入vue

引入vue.js，引用全部vue.js或者部分vue.js

使用vue-cli工程化启动项目

模板表达式{{}}

属性

v-bind：我们能将 data 中的值绑定到当前属性中，可简写为 :

v-on：能够绑定实例中配置的事件，可简写为 @

v-for：列表级别渲染，迭代渲染所有⼦元素

v-if/v-else/v-show：控制⼦元素视图显隐

v-model：应⽤于表单，创建与元素的双向绑定

v-html：将最终值的结果渲染为 html

v-text：等同于直接在⽂本处使⽤ {{xx}}

计算属性

组件  提高代码复用性

  Vue.component('hello-world', {
    data: function () {
      return {
        message: 'hello world'
      }
    },
    template: '<p>{{message}}</p>'
  });
  new Vue({ el: '#app' })

<div>
   <hello-world></hello-world>
</div>

⽣命周期

官网链接：https://cn.vuejs.org/