Vue基础

最新推荐文章于 2020-06-23 10:49:14 发布

那不是我的月亮a

最新推荐文章于 2020-06-23 10:49:14 发布

阅读量119

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yanwu9537/article/details/90549383

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

模板语法 mustache语法双大括号语法

指令

Vue
指令
组件

作用：是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM
以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM
这个指令需要模板语法的支持，所以我们采用jsx语法糖

模板语法

模板语法支持性还是很高的，数据类型都是支持的，但是不支持输出语法（ console.log alert ）

<div id="app">
    <p> str: {{ str }} </p>
    <p> num: {{ num }} </p>
    <p> bool: {{ bool?'true':'false' }} </p>
    <p> bool: {{ bool&&'true'||'false' }} </p>
    <p> null: {{ nul&&'null'||'unnull' }} </p>
    <p> undefined: {{ und && 'undefined' || '520' }} </p>
    <p> arr: {{ arr[0] }} </p>
    <p> obj: {{  obj.name  }} </p>
    <!-- <p> console.log  {{ console.log( '1902' ) }} </p> -->
    <!-- <p> alert: {{ alert( '千锋教育' ) }} </p> -->
    
    <p> function : {{ ( function(){ return '千锋教育' })() }} </p>
    
    <p> msg内容反向：{{ msg.split('').reverse().join('') }} </p>
</div>

new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js',
      str: 'str',
      num: 100,
      bool: true,
      nul: null,
      und: undefined,
      arr: [ 1,2,3,4 ],
      obj: {
        name: 'yyb'
      }
    }
  })

指令

格式：

v-xxx = “mustache语法”
v-xxx = “msg”
v-xxx = “{{msg}}” ×//错的

v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )

防止脚本攻击 xss CSRF

v-bind 单项数据绑定

使用技巧：凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
格式： v-bind:DOMattr = “data”
简写： :DOMattr = “data”

v-text 非转义输出

<div id="app">
    <p> {{ msg }} </p>
    <h3> v-html </h3>
    <p v-html = "msg" style="" >  </p>  
    
    <h3> v-bind 单项数据绑定 </h3>
    <input type="text"  v-bind:value = "val"/>
    <input type="text" :value = "val"/>
    <img :src="img" alt="">

    <h3> v-text </h3>
    <p v-text = "msg"></p>
    <h3> v-html vs v-text </h3>
     <div v-html = "a"></div>
     <div v-text = "a"></div>
 </div>

new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      val: '千锋教育',
      img: 'https://www.baidu.com/img/dong_96c3c31cae66e61ed02644d732fcd5f8.gif',
      a: " <strong> 千锋教育 </strong> "
    }
  })

class vs style

class

object

  <div :class = "{[size]:true,[color]: true,[box]: true}"></div>
  <div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>

arr

  <div :class = "[size,box,color]"></div>
  <div :class = "[class_flag?size:'',box,color]"></div>

推荐使用arr形式

style

 - object
   ```html
     <div :style = "{width:'100px',height: '100px',background: 'blue'}"></div>
     <div :style = "style"></div>
   ```
 - arr
   ```html
     <div :style = "[style,border]"></div>
   ```

条件渲染 v-if && v-show

条件渲染有两个指令，一个是 v-if , 另外一个是 v-show

  - v-if  有三种使用形式
  <div id="app">
    <h3> v-if 单路</h3>
      <p v-if = "flag"> 单路分支 </p>
    <h3> v-if 双路 </h3>
      <p v-if = "flag"> 双路1 </p>
      <p v-else> 双路2 </p>
    <h3> v-if 多路 </h3>
      <p v-if = "type === 'A' "> A </p>
      <p v-else-if = " type === 'B'"> B </p>
      <p v-else> C </p>
  </div>
  
   new Vue({
    el: '#app',
    data: {
      msg: 'hello  下午到了',
      flag: false,
      type: 'A'
    }
  })

v-show

<div id="app">
    <h3> v-show </h3>
    <p v-show = "flag"> {{ msg }} </p>
</div>

  /* 
    1. v-show 操作的是一个DOM的dispay样式属性
    2. 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？
      v-show不管值是什么，它都会渲染出来
   */
  new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js',
      flag: false
    }
  })

v-if vs v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
template
template标签如果放在模板的范围内使用，那么将来不会被解析渲染

列表渲染
v-for 是用来做列表渲染的
- 格式
  v-for = " xxx in(of) data "
  举例：
  v-for = " item in(of) todos "
- 带参数的格式
  v-for = " (item,index) in todos "
- key( 留一部分 )
- 每次列表循环的后面都要绑定一个key,是为了进行DOM的唯一标识，这样就不会让vue因为惰性而影响列表的正常渲染
- 理想的key是使用数据中的id

<div id="app">
       <h3> num </h3>
       <div v-for = "n in num"> {{ n }} </div>

       <hr>
       <h3> string </h3>
       <div v-for = "s in str"> {{ s }} </div>

       <hr>
       <h3> arr </h3>
       <div v-for = "v in arr"> {{ v }} </div>
       <h3> arr - v-for 带参数的 </h3>
       <div v-for = "(v,i) in arr">
           <p> value: {{ v }} </p>
           <p> index: {{ i }} </p>
       </div>

       <hr>
       <h3> object </h3>
       <div v-for = "v in obj"> {{ v }} </div>
       <h3> object-v-for 带参数 </h3>
       <div v-for = "(v,k) in obj">
           <p> value: {{ v }} </p>
           <p> key: {{ k }} </p>
       </div>
       <h3> object-v-for 带三个参数 </h3>
       <div v-for = "(v,k,i) in obj">
           <p> value: {{ v }} </p>
           <p> key: {{ k }} </p>
           <p> index: {{ i }} </p>
       </div>

       <hr>
       <h3> json </h3>
       <button v-on:click = "add"> 添加 </button>
       <button v-on:click = "change"> 修改 </button>
       <button v-on:click = "clear"> 清除 </button>
       <ul>
           <li v-for = "v in json">
               <ul>
                   <li v-for = "(e,i) in v">
                       {{ e }}
                   </li>
               </ul>
           </li>
       </ul>

       <hr>
       <!-- 新数组  computed - filter -->
       <ul>
           <li v-for = "v in newJson" :key = "v.id">
               {{ v.text }}
           </li>
       </ul>
   </div>

new Vue({
        el: '#app',
        data: {
            msg: '春风得意马蹄疾',
            num: 10,
            str: '一日看尽长安花',
            arr: [1,2,3,4],
            obj: {
                id: 1,
                name: 'xxx',
                age: 998
            },
            json: [
                'abc',
                {
                    id: 1,
                    text: '吃饭'
                },{
                    id: 2,
                    text: '睡觉'
                },{
                    id: 3,
                    text: '打游戏'
                }
            ]
        },
        methods: {
            add () {
                this.json.push({
                    id: 4,
                    text: '喝水'
                })
            },
            change () {
                Vue.set(this.json,0,'做作业')
                // this.$set(this.json,0,'做作业')
            },
            clear () {
                this.json.splice(0,this.json.length)
            }
        },
        computed: {
            newJson(){
                return this.json.filter(v=>{
                    return v.id>1
                })
            } 
        }
    })

**数据的更新检测 **
- a.使用以下方法操作数组，可以检测变动
  - push(),pop(),shift(),unshift(),splice(),sort(),reverse()
- b.filter(),concat()和slice(),map(),新数组替换旧数组
- c.不能检测以下变动的数组
  - vm.items[indexOfItem]=newValue
  - 解决(1)Vue.set(example1.items,indexOfItem,newValue);
    vm.items.length = 0
  - 解决 (1)splice
methods 方法

事件的添加使用的是 v-on:eventType = ‘事件处理程序’

事件处理程序往options里面的methods配置项中书写

  <button v-on:click = "add"> + </button>

  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4]
    },
    methods: {
      add () {
        this.arr.push(5)
      }
    }
  })

computed 计算属性
- 1. 计算属性中存放的也是方法
- 1. 计算属性的方法中必须要有返回值
- 1. 计算属性的方法名可以像data选项中定义的数据一样使用

事件

指令v-on
格式
v-on:eventType = “事件处理程序名称”
简写
@eventType = ‘事件处理程序名称’
参数
事件修饰符

<div id="app">
  <div class="big" @click.stop = "bigHandler">
    <div class="middle" @click.stop = "middleHandler">
      <div class="small" @click.stop = "smallHandler"></div>
    </div>
  </div>
  <hr>
  <div class="big" @click.self = "bigHandler">
    <div class="middle" @click.self = "middleHandler">
      <div class="small" @click.self = "smallHandler"></div>
    </div>
  </div>
</div>

  /* 
    事件的修饰符
      格式： v-on:click.xxx = 'handler'
      xxx指的是修饰符的名称

    问题： 修饰符使用有什么好处？ 

    举例： 事件冒泡案例

    分析： 发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余

    解决： 事件修饰符
  */
  new Vue({
    el: '#app',
    methods: {
      bigHandler (e) {
        // e.stopPropagation()
        alert('big')
      },
      middleHandler (e) {
        // e.stopPropagation()
        alert('middle')
      },
      smallHandler (e) {
        // e.stopPropagation()
        alert( 'small' )
      }
    }
  })

按键修饰符

<div id="app">
    <input type="text" @keyup = "get_user_input">
    <h3> 按键修饰符 </h3>
    <input type="text" @keyup.enter = "get_user_import">
    <input type="text" @keyup.13 = "get_user_import">
    <input type="text" @keyup.16 = "get_user_import">
</div>

    /* 
    按键修饰符
      案例： 敲击键盘的enter键，将用户输入的数据拿到手？

    事件的书写
      先写方法，然后在绑定DOM元素身上


    // box.onclick = function(){}

    原因：我们发现当我们需要书写很多下面类似代码的时候，发现代码在重复，我们希望代码能复用或是简写
    解决： 它将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用

    自定义按键修饰符键盘码

    Vue.config.keyCodes.p = 80

   */
    new Vue({
        el: '#app',
        methods: {
            get_user_input(e){
                const keyCode = e.keyCode;
                const target = e.target;
                if( keyCode === 13 ){
                    console.log(target.value)
                }
            },
            get_user_import(e){
                console.log(e.target.value)
            }
        }
    })