Vue学习笔记（1）vue基础

vue入门

Vue概述

Vue：渐进式JavaScript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

• 易用
• 灵活
• 高效

Vue基本使用

原生js->jquery->框架

<div id="app">
    {
  {msg}}
</div>
<script>
    var vm=new Vue({
    
        el:'#app',
        data:{
    
            msg:'Hello Vue'
        }
    })
</script>

el：元素的挂载位置

data：模型数据

{ {}}：差值表达式

原理分析：Vue语法–（Vue框架）->原生语法

Vue模板概述

前端渲染？

把数据填充到HTML标签中

• 原生js拼接字符串（复杂，后期维护困难）
• 使用前端模板引擎（没有事件机制）
• 使用vue特有的模板语法

语法概述

• 差值表达式

• 指令（v-）

• 事件绑定

• 属性绑定

• 样式绑定

• 分支循环结构

指令

指令本质就是自定义属性

v-cloak

解决问题：闪动

原理：先隐藏，替换好值之后再显示最终的值

<style>
    [v-clock] {
    
        display: none;
    }
</style>

<div v-cloak>{
  {msg}}</div>

v-text

相比差值表达式更加简洁，没有”闪动“问题

<div v-text="msg"></div>

 msg: 'Hello Vue',

v-html

<div v-html="msg1"></div>

msg1:'<h1>Hello Vue</h1>'

比较危险，可能会导致xxs（跨站脚本危机），本网站内部数据可以使用

v-pre

<div v-pre>{
  {msg}}</div>

显示原始信息

数据响应式

数据变化导致页面内容的变化

• v-once只编译一次，再次更改数据不会变化，提高性能

<div v-once>{
  {msg}}</div>

双向数据绑定

<div>{
  {msg}}</div>
<label>
    <input type="text" v-model="msg"/>
</label>

结果：数据同步

页面内容影响数据，数据在影响页面内容

MVVM设计思想

M（model）

V（view）

VM（View-Model）

Vue模板语法

事件绑定

v-on指令 or @

绑定函数名称

<div id="app">
<div v-cloak>{
  {msg}}</div>
<button v-on:click="msg++">点击</button>
<button @click="msg++">点击</button>
</div>
<script>
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            msg: 0
        }
    })
</script>

绑定函数调用

 <button @click="handle(1,2,$event)">点击3</button>
<button @click="handle1">点击4</button>

var vm = new Vue({
    el: '#app',
    data: {
        msg: 0,
    },
    methods:{
        handle:function (p,p1,event){
                console.log(event.target.innerHTML);
                this.msg++;
            },
            handle1:function (event){
                console.log(event.target.innerHTML);
            }
    }
})

• 如果时间直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

• 如果事件绑定函数调用，那么时间对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

事件修饰符

• 阻止冒泡

<div v-text="msg"></div>
<div v-on:click="handle1" >
<button @click="handle">按钮</button>
 </div>

methods:{
  handle:function (event) {
      event.stopPropagation();
  },
    handle1:function (){
      this.msg++;
    }
}

或者直接使用修饰符

<button @click.stop="handle">按钮</button>

• 阻止默认行为

<button @click.prevent="handle">按钮</button>

或者直接使用修饰符

<a href="http://www.baidu.com" v-on:click.prevent>百度</a>

按键修饰符

submit:function (){
  console.log(this.username+"    "+this.password);
},
deleteAll:function (){
  this.username='';
}

• enter回车键（示例：提交）

  <input type="text" v-model="password" v-on:keyup.enter="submit">

• delete删除键（示例：删除全部）

<input type="text" v-model="username" v-on:keyup.delete="deleteAll">

Vue自定义按键修饰符

<input type="text" v-on:keyup.65="custom">

或者

<input type="text" v-on:keyup.a="custom">

  Vue.config.keyCodes.a=65;

简答计算器

<div id="app">
    <h1>简单计算器</h1>
    数值A:<input type="text" v-model=numberA>
    <br/>
    数值B:<input type="text" v-model=numberB>
    <br/>
    <button @click="calculate">计算</button>
    <br/>
    计算结果：{
  {result}}
</div>
<script>
    var v=new Vue({
    
        el:'#app',
        data:{
    
            numberA:'',
            numberB:'',
            result:''
        },
        methods:{
    
            calculate:function (){
    
                this.result=parseInt(this.numberA)+parseInt(this.numberB);
            }
        }
    })
</script>

属性绑定

<a v-bind:href="url">百度</a>

<script>
    var v=new Vue({
    
        el:'#app',
        data:{
    
            url:"http://www.baidu.com"
        }
    })
</script>

样式绑定

class样式处理

.active{
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

• 对象语法

<div v-bind:class="{active:isActive}"></div>

        data:{
            isActive:true
        },methods:{
            handle:function (){
                this.isActive=!this.isActive;
            }
        }

• 数组语法

<button v-on:click="handle">按钮</button>

<div v-bind:class="[activeClass,errorClass]"></div>

data: {
    activeClass: "active",
    errorClass: "error"
}, methods: {
    handle:function () {
        this.activeClass="";
    }
}

• 数组和对象结合使用

<div v-bind:class="[activeClass,errorClass,{test:isTest}]"></div>

• class绑定的值可以简化操作

<div v-bind:class="combineClass"></div>

data: {
    activeClass: "active",
    errorClass: "error",
    combineClass:["active","error"]
}

或者

<div v-bind:class="objClass"></div>

objClass:{
    active:true,
    error:true
}

• 默认的class会保留

style样式处理

• 对象

<div v-bind:style="{
      border:borderStyle,width:widthStyle,height:heightStyle}"></div>

data: {
    borderStyle:"1px solid blue",
    widthStyle:"100px",
    heightStyle:"100px",
}

• 数组

<div v-bind:style='[objStyles,overrideStyle]'></div>

            objStyles:{
   
              border:'1px solid green',
              width:'200px',
              height: '100px'
            },
            overrideStyle:{
   
                backgroundColor:"red"
            }

分支循环结构

<div v-if="score>=90">优秀</div>
<div v-else-if="score<90&&score>=80">良好</div>
<div v-else-if="score<80&&score>=60">及格</div>
<div v-else>不及格</div>
<div v-show="flag">测试flag</div>

• v-if和v-show的区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示

循环结构

<ul>
    <li v-for="(item,index) in color">{
  {item}}{
  {index}}