day01

vue的介绍

vue的特点

易用，灵活，高效

渐进式

根据需要的不同加载不同的模块

库和框架的区别

库：功能单一

框架：功能强大，适用于场景多

vue的基本语法

文字渲染 v-text/v-html
判断显示隐藏 v-if/v-show v-else v-else-if v-if-else
绑定事件 v-bind:abc='abc'   简写 :abc='abc'
事件添加 v-on:事件类型 = '要执行的函数'  简写 @事件类型 = '处理函数'
循环 v-for='(item,key,index) in 对象' 循环对象 item属性值 key属性名 index下标
v-for='(item,index) in 数组'  循环数组  item对象中的每一项,index下标
v-model 对相数据绑定：视图影响模板，模板影响视图
使用方法：
  <p>姓名:<input type="text" v-model='user.name'></p>
  <p>年龄:<input type="text" v-model='user.age'></p>
  <p>爱好:<input type="text" v-model='user.hobby'></p>
   user:{
           name:'张三',
           age:'20',
           hobby:'打篮球'
        }

 

vue的实例方法

new Vue({
    el:''//标签选择器，element，
    data:{//放置属性
    
    }，
    methods:{
        //定义方法    
    }
})

绑定方式

class绑定

 <div class="box div3">我是div</div>
 <!-- 通过绑定属性的方式 -->
 <div :class='box'>我是div2</div>
 <!-- 通过三元方式添加样式 -->
 <div :class='[1==2?box:div3]'>我是div3</div>
 <!-- 复合样式-->
 <div :class='box+" div3"'>我是div4</div>

style绑定

<div style='width: 100px;height: 100px;'>我是div</div>
<!-- style的行内样式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>

知识点:

key的作用; 绑定一个唯一值，避免勾选不正确的问题 与v-for的固定搭配