VUE基础知识

VUE基础知识

基本定义

const app = new Vue({ 
el:'#app',   //绑定id为(app)的模块
data:{       //定义数据
message:'你好呀',
name:'罗力元',

number:0
waiturl:'<a href="http://www.baidu.com">百度一下</a>',
url:'www.baidu.com',
movies:['铃芽户缔','天气之子','你的名字','言叶之庭'],
info{
    name:'罗力元',
    age:'20',
    height:171
}
},
methods:{  // 定义方法
    add(){
        return this.number++
    },

biggg(s1,s2){
    console.log(s1+'++++'+'s2')
},
    
      btnevent(){
        console.log('btnevent');
      },
      divevent(){
        console.log('divevent');
      },
      subevent(){
        console.log("subevent");
      },
      keyevent(){
        console.log('你输入了一此回车');
      }

},
computed:{ //定义计算属性
    finalname(){
        return this.name+'   '+this.message
    }
},
filters:{	//定义过滤器
    
}
                    
})

计算属性的结果会直接加载到内存，适合重复使用

基本使用

引用data值 双大括号

<h2>{message}} </h2>
 <h2 v-once>{{message}}</h2> <!-- 只响应一次-->
<h2 v-html="waiturl"></h2>   <!--返回data内的waiturl值并解析为html代码 -->
 <h2 v-text="message">我是不是被覆盖了</h2><!--返回data内的message值，但会覆盖原本的文字内容-->
 <h2 v-pre>{{message}}</h2> <!-- 让内容不响应直接展示 -->
 <h2 v-cloak>hello{{message}}</h2> <!-- 遮挡 在还没加载完成时，不显示内容 -->

v-on 绑定事件

给按钮绑定一个点击事件add

<button v-on:clink='add' 或 @clink='add'  >
    
</button>

v-on的参数

注意：
当在methods中定义的方法有传入值时，

<button @click="biggg">--</button>
<!-- 在引用时不带"()"  那就会在第一个参数中传入event事件  -->

<button @click="biggg()">--</button>
<!--在应用时带"()"不赋值 那所有参数都被赋值为undefined -->

$event可以主动获取event事件 

v-on修饰符

<div id="app">
  <div @click="divevent">
    <h2>出现冒泡现象（默认连带触发）</h2>
    <button @click="btnevent">按钮</button>
</div>
    
   <!-- 例1 .stop-->
  <div @click="divevent">
    <h2>v-on的.stop不会出现冒泡现象</h2>
    <button @click.stop="btnevent">按钮</button>
  </div>
    <!-- 例2 .prevent-->
    <form action="https://www.baidu.com">
  <input type="submit" value=".prevent阻止默认行为" @click.prevent="subevent">
</form>
    <!--例3 .cnce-->
        <button @click.once="btnevent">只能按一次的按钮</button> <!--.once只响应一次-->
<!--例4 .enter-->
    <input value="监听输入回车" type="text" @keyup.enter="keyevent">

v-bind 动态绑定属性值

<a v-bind:href='url'>百度一下</a> 或 <a :href='url'>百度一下</a>

在动态绑定class ，style 属性时，需要这样写

<a :class={active:true,title:true} ></a>

同时也能直接用普通方法写固定的属性

v-for 循环

<h2 v-for='item in movies'> {{item}}</h2>
<h2 v-for='(item,index) in movies'> {{item}}</h2> <!-- 先传的值是重要的 item是值 index是下标 -->
<h2 v-for='(value,key,index) in info'> {{item}} :key='key'</h2> <!--值在前面 key在中间 index在后面  -->
<!--可设置:key='唯一值'来增强vue内部循环性能-->

循环遍历data内的movies值

v-if 判断

  <h2 v-if="number>=90">{{message}}y=优秀</h2>
  <h2 v-else-if="number>=80">{{message}}良好</h2>
  <h2 v-else-if="number>=70">{{message}}中</h2>
  <h2 v-else>{{message}}差</h2>

v-show 展示

<h2 v-if="false" >{{message}}v-if</h2>  <!-- 样式直接不渲染 （建议一次切换用v-if）-->
  <h2 v-show="false" >{{message}}v-show</h2> <!--display=none 样式消失但是存在   （多次切换用v-show）-->

vue中的方法

        
        this.movies.push("云端彼此,约定的地方") //push方法 
        this.movies.pop()//pop方法 
        this.movies.shift()//shift方法  删除数组第一个值
        this.movies.unshift('千与千寻','龙猫')//unshift方法  在数组最前面添加一个值
        this.movies.splice(1,3,'起风了')//splice方法  splice(开始位置下标,替换个数,'替换值')
        this.mocies.sort()//sort方法 
        this.movies.reverse()//reverse方法 
			//上面页面都能直接响应

        /* this.ssss[2]='红猪' */
        //通过索引值修改数组的内容 值发生变化，但页面不会相应
		//解决方法1
        Vue.set(this.movies,2,'红猪')
		//解决方法2
		this.movies.splice(2,1,'红猪')

v-models双向绑定

vue中data的值

    data: {
      message: '你好呀',
      sex: '男',
      isSure: false,   /*checkbox单选框绑定布尔值*/
      love: [],   /*checkbox复选框绑定列表(数组)*/
      }

<!--双向绑定基本使用 -->
  <label for="try">
    <input type="text" id='try' v-model="message">
  </label>
  <div>{{message}}</div>

<!--绑定单选框radio -->
  <label for="male">
    <input id="male" type="radio" value="男" v-model="sex">男
  </label>

  <label for="female">
    <input id="female" type="radio" value="女" v-model="sex">女
  </label>

  <div>{{sex}}</div>
  
<!-- 绑定复选框checkbox-->
 <!-- checkbox单个值-->
  <label for="sure">
    <input type="checkbox" id="sure" v-model="isSure">同意协议
  </label>
  <button :disabled="!isSure">下一步</button>
  <div>{{isSure}}</div>


 <!-- checkbox多个值-->
  <input type="checkbox" value="篮球" v-model="love">篮球
  <input type="checkbox" value="足球" v-model="love">足球
  <input type="checkbox" value="羽毛球" v-model="love">羽毛球
  <input type="checkbox" value="乒乓球" v-model="love">乒乓球
  <div><h2>你的选择是{{love}}</h2></div>

v-models修饰符

  <!--laze 懒处理-->
  <input type="text" v-model.lazy="message">


  <!--number 自动转换为数字 -->
  {{age}} -- {{typeof age}}
  <input type="number" v-model.number="age">


  <!--rtim 自动去除两边的空格 -->
  {{name}}
  <input type="text" v-model.trim="name">

编程语言的3个高级函数

    methods:{
      filter_try(){
      this.names =  this.names.filter(function (n){
          return n>100
        })
      },
      map_try(){
        this.names=this.names.map(function (n){
          return n*2
        })
      },
      reduce_try(){
        this.data=this.names.reduce(function (prevalue,value){
          return prevalue+value
        },0)
      },
    },
    data:{
      message:'你好呀',
      names:[213,33,1,23,543,666,5],
      data:0
    }