Vue-基础概念

• vue的概念

1. 什么是vue
    是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,数据绑定以及组件化开发是重点,编写的代码只需要关注逻辑层面即可。

2. CDN引用
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

3.指令

• vue的使用

 1. 声明
    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例
    <div id="app">
      
    </div>

    <script>
        var app = new Vue({
               el:'#app',
               data:{
                   //属性定义
               },
               methods:{
                  //方法调用
               },
               computed:{
                  //计算属性,此属性可以不在data中定义,但可以直接使用,
                  //可以像绑定普通属性一样在模板中绑定计算属性
                  //计算属性是基于它们的依赖进行缓存的,相关依赖发生改变时它们才会重新求值
                  message(){
                      return this.属性;
                  },
                  fullName: {
                        get(){
                            // getter
                        },
                        set(){
                            // setter
                        }
                  }
               },
               watch:{
                  //侦听属性,当有一些数据需要随着其它数据变动而变动时
               },
        });
    </script>

    使用调用属性数据
    this.属性名
    

• 生命周期

1.钩子方法
<script>
        var app = new Vue({
               el:'#app',
               beforeCreate(){
                  //请求之前的转子加载
               },
               created(){
                   //在一个实例被创建之后执行,可用于网络接口请求api
               },
               mounted(){
                   //挂载执行
               },
        });
    </script>

• 语法

1.文本  使用“Mustache”语法 (双大括号)
  {{ 属性名 }}
  {{ ok ? 'YES' : 'NO' }}
  <div v-bind:id='dynamicId'></div>
  注：Mustache语法不能作用在html属性上
2.指令
   带有 v- 前缀的特殊特性,v-if、v-model 不需要带参数,
    v-bind:、v-on:带参数,并提供缩写v-bind: = : ,v-on = @
3.class属性
    * 对象语法,v-bind:class 指令也可以与普通的 class 属性共存
      <div class="static" v-bind:class="classObj">

      var app = new Vue({
               el:'#app',
               data:{
                    classObj:{
                          active:true,
                          'text-danger':false
                    }
               }
        });
    * 数组语法
4.内联样式
   CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)
   * 对象语法
     <div v-bind:style="styleObject"></div>

    data: {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }
  * 数组语法