【Web前端】【VUE】VUE基础

一. Vue 基础

1. 模板语法

(1)插值

• a.文本 { {}}
• b.纯HTML
• v-html ，防止XSS,csrf注入恶意客户端代码（
  (1) 前端过滤
  (2) 后台转义(< > < >)
  (3) 给cookie 加上属性 http
  ）

```
222222222

new Vue({ el:"#box", data:{ whichcolor:"yellow", mysrc:"https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg", myhtml:"链接", isactive:true } })

• v-if 动态创建和删除

动态创建和删除
new Vue({
       el:"#box",
       data:{
         isCreated:true
         }
    })

• v-show 动态显示和隐藏

动态显示和隐藏
new Vue({
       el:"#box",
       data:{
         isShow:true
         }
    })

• v-on:click

click1
//click2  //v-on:click => @click 缩写

methods:{
 handleMyClick(){
   console.log("click")
   this.isCreated = !this.isCreated
   this.myname = "xiaoming"
   this.isActive = !this.isActive
 }
}

• v-for

 

   

     {
    {myitem}}---{
    {myindex}}
   
 
     

   

     
   
 

new Vue({
   el:"#box",
   data:{
     datalist:["1111","2222","3333","555","666"]
            },
    imglist:["https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg?x-oss-process=image/quality,Q_70",
      "https://pic.maizuo.com/usr/movie/294a01da8a6c9ed99bfbaaf52b2e0f25.jpg?x-oss-process=image/quality,Q_70",
      "https://pic.maizuo.com/usr/movie/e004f1cdd920fcb60dfd43f6f19afc2c.jpg?x-oss-process=image/quality,Q_70",
      "https://pic.maizuo.com/usr/movie/428385c8393778d8d75de22434d7ce7d.jpg?x-oss-process=image/quality,Q_70"
     ]
 })

(3)缩写

• v-bind:src => :src
• v-on:click => @click

click1
click2

    new Vue({
       el:"#box",
       data:{
         myname:"kerwin",
         isShow:true,
         isCreated:true
         ]
      },// 状态
       methods:{
        handleMyClick(){
          console.log("click")
          this.isCreated = !this.isCreated
          this.myname = "xiaoming"
          this.isActive = !this.isActive
        }
       }
     })

2. class 与 style

(1)绑定HTML Class

对象语法、数组语法

 click
 
我是动态绑定class-三目写法
 
我是动态绑定class-对象写法
 
我是动态绑定class-数组写法
 
    	var vm = new Vue({
        el:"#box",
        data:{
          isActive:true,
          classobj:{
            a:true,
            b:true 
            // a b, class名字
          },
          classarr:["a","b"],
          styleobj:{
            backgroundColor:"red"
          },
          stylearr:[]
        },
        methods:{
          handleClick(){
            this.isActive = !this.isActive
          }
        }
      })

(2)绑定内联样式

 
我是动态绑定style-三目写法

对象语法 （无法再添加新的属性）

我是动态绑定style-对象写法

var vm = new Vue({
    el:"#box",
    data:{
      isActive:true,
      classobj:{
        a:true,
        b:true 
        // a b, class名字
      },
    methods:{
      handleClick(){
        this.isActive = !this.isActive
      }
    }
  })

• 以上方法，页面添加绿色边框失败

数组语法

我是动态绑定style-数组写法

var vm = new Vue({
    el:"#box",
    data:{
      isActive:true,
      classarr:["a","b"],
      styleobj:{
        backgroundColor:"red"
      },
      stylearr:[]
      },
    methods:{
      handleClick(){
        this.isActive = !this.isActive
      }
    }
  })

//需要将 font-size =>fontSize

3. 条件渲染

(1)v-if

 
动态创建和删除--111111111111
 
动态创建和删除--2222222222

(2)v-else v-else-if

 

   

     {
    {data}}
   
 
 

   购物车空空如也
 
 

   111111
 
 

   222222
 
 

   333333
 

(3)template v-if ,包装元素template 不会被创建

• 因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

当ok为真值时，渲染为：

Title
Paragraph 1
Paragraph 2

因此，写在template上的属性和指令都是没有用的

(4)v-show

动态显示和隐藏

isShow:true,

4. 列表渲染

(1)v-for (特殊 v-for=“n in 10”)

a. in
b. of

(2)key：

*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。data.id

(3)数组更新检测

• 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)
    (2)splice

(4)应用:显示过滤结果

• @input input事件只要value改变，就会触发
• @changge change事件在控件失去焦点时才会响应变化
• filter()会改变数组的值，在应用中有时要借用数组保存备份原有的数据

filter、map

• filter() arr.filter(item=>item>2)

• filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

• 注意： filter() 不会对空数组进行检测。
  注意： filter() 不会改变原始数组。

var arr= [1,2,3];

// var arr2=  arr.filter(function(item){
//     return item>2
// })

var arr3 = arr.filter(item=>item>2);   //[3]

• map() arr.map(item=>item*item)

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
  map() 方法按照原始数组元素顺序依次处理元素。

• 注意： map() 不会对空数组进行检测。
  注意： map() 不会改变原始数组。

 var arrmap = arr.map(item=>item*item);// [1,4,9]
// for(var i in arr){
//   var $li = $("
").html(arr[i]);
// }
 var arrli = arr.map(item=>`
${item}
`);

5. 事件处理

(1)监听事件-直接触发代码

111111111111111

• click1 函数有没有括号都可以
• click2
• click3 若函数简单，则如此一句话写出

(2)方法事件处理器-写函数名 handleClick

(3)内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象

(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html

• .stop 阻止冒泡行为

• .prevent 阻止默认行为 （例如：阻止a链接标签跳转）

  changepage
  

• .self .self只执行直接作用在该元素身上的事件，所以它相当于忽略了其他元素的冒泡或者捕获事件。但是这种忽略只局限于自身，只有点了自己才会触发。
  .stop是防止事件冒泡，.self则是忽略了事件冒泡和事件捕获的影响

  
        
  11111
  

• 阻止单击事件冒泡

• 提交事件不再重载页面

• 修饰符可以串联

• 只有修饰符

• 添加事件侦听器时使用事件捕获模式

  ...

• 只当事件在该元素本身 (比如不是子元素) 触发时触发回调

  ...

(5)按键修饰符

• .enter

• @keyup().enter

• 判断只有按下某个键才触发

  • js判断：

  handleKeyup(ev){
      console.log(ev)
      if(ev.keyCode===13){
          console.log("执行todolist 添加动作")
      }
      console.log("执行todolist 添加动作")
  }
  

  • 利用修饰符判断：

事件冒泡问题

 

     
11111
     
2222
     
3333
 

• 传统方法阻止冒泡：

  • 获取事件对象ev
  • ev.stopPropagation();

  
         
  11111
     
  
      handleLiClick(ev){
          ev.stopPropagation();
          console.log("li click")
      },
  

• Vue阻止冒泡：

  • 修饰符.stop @click.stop 阻止冒泡，父节点事件不会触发

     
  
         
  11111
     
  

6. 表单控件绑定/双向数据绑定

v-model 双向数据绑定

• 多选框 绑定数组

  checkgroup:[],
  

    游泳
    滑冰
    长跑
  

• 单选框

  picked:"js"
  

  php
  js
  java
  

(1)基本用法-购物车

(2)修饰符

• .lazy :失去焦点同步一次 v-model.lazy

   
   {
        {mytext}}
  

• .number :格式化数字 v-model.number
  (只获取前面的数字，但前面不是数字则都获取)

  
  {
        {mynumber}}
  

• .trim : 去除首尾空格 v-model.trim

  
  |{
        {myusername}}|