Vue基础-day-01（常用指令，事件绑定，属性绑定，分支结构，循环结构）

Vue是什么？

Vue是一套用于构建用户界面的渐进式框架
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库和项目的整合，

使用Vue将helloworld渲染到页面上

//vue使用的4个步骤
//1 需要提供标签用于填充数据
// 2 导入vue.js库文件
// 3 使用vue的语来做功能
// 4 把vue提供的数据填充到标签里面
<body>
    <div id="app">
//这里是提供用来填充数据的标签
//使用插值表达式
        <div>{{msg}}</div>
    </div>
//导入vue.js库文件
<script  src="./js/vue.js">

</script>
<script>
//使用vue语法来写功能
        var vm=new Vue（{
                 el:"#app", // 获取元素
//把vue提供的数据填充到标签里面
                  data:{ //data中存放要渲染到页面的值
                        msg:'hello world'
                    }
        }）
</script>
</body>

指令

  • 本质就是自定义属性
  • Vue中指定都是以 v- 开头

v-cloak
防止页面加载时出现闪烁问题

//这里使用属性选择器
<style> 
[v-cloak]{  
display:none
}
</style>
<div  v-cloak> </div>

v-text

  • v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app" v-text="msg"></div>
<script  src="vue.js"></script>
<script> 
    var vm=new Vue({
      el:"#app",
      data:{
msg:"text文本填充到页面"
         }
     })
</script>

v-html

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中
  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div id="app" v-html="msg"></div>
<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
        msg:"<h1>我是h1标签</h1>"
}
})
</script>

v-pre

  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
<div id="app" v-pre></div>
<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
        msg:"苡米呱呱"
}
})
</script>

v-once

  • 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<div id="app" v-once></div>
<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
        msg:"苡米乖乖"
}
})
</script>

双向数据绑定

双向数据绑定指令 v-model


<div id="#app">
<div>{{msg}}</div>
    <input  v-model="msg"  />
</div>
<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
        msg:"苡米乖乖"
}
})
</script>

MVVM设计思想

1 M(model)
2 V(view)
3 VM(View-Model)

事件绑定

v-on指令 如何绑定事件
<button v-on:click="事件处理逻辑"></button>
简写：
<button @click="事件处理逻辑"></button>

事件函数调用
<button v-on:click="函数名"></button>
函数调用
<button v-on:click="函数名.()"></button>
函数写在vue语法 methods 中

<div id="app">
<button v-on:click="handle"></button>
<button v-on:click="handle( 
可以传参 )"></button>
</div>

var vm=new Vue({
el:" #app"
data:{
num：0
}
methods:{
handle:function(){  // 这里不能使用箭头函数，
console.log(this); //这里this指向vm实例对象
console.log(this===vm) // true
this.num++
}
}
})

事件函数传参
1 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -
2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>

事件修饰符

  • .stop 阻止冒泡
    <a v-on:click.stop=" 函数名称">
  • .prevent 阻止默认行为
    <a v-on:click.prevent="函数名称">
  • 其余更多修饰符可以在vue官网 事件处理 事件修饰符 中查询

按键修饰符

  • .enter 按键修饰符
    <input v-on:keyup.enter="函数名称" />
  • .delete 按键修饰符
    <input v-on:keyup.delete="函数名" />
  • 其余更多修饰符可以在vue官网 事件处理 按键修饰符 中查询

自定义按键修饰符

全局config.keyCodes对象
Vue.config.KeyCodes.aaa=65

  • 自定义按键修饰符名字是自定义的，但是自定义对应的值是keyCode里面对应的值

属性绑定

v-bind 指令被用来响应地更新 HTML 属性

  • v-bind指令用法(固有属性)
    <a v-bind:href=" 连接路径"></a>
  • 简写形式
    <a :href="url"></a>

v-model 低层实现原理

<input v-bind:value="msg" v-on:input ="msg=$event.target.value" />

样式绑定

1 class样式处理

  • 对象语法
    <div v-bind:class="{ active:isActive }">
//在data数据中
var vm=new Vue({
el:" ",
data:{
isActive:true
}
methods:{
headle:function（）{
this.isActive=!this.isActive
          }
      }
})
  • 数组语法

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

//在data数据中
var vm=new Vue({
el:" ",
data:{
activeClass:"类名"，
errorClass:"类名"
}
methods:{
headle:function（）{
this.activeClass="  "
this.errorClass="  "
}
      }
})

样式绑定相关语法细节：
1 对象绑定和数组绑定可以结合使用
2 class绑定的值可以简化操作
3 默认的class如何处理？ 默认的class会保留

2 style 样式处理

  • 对象语法
    <div v-bind:style="{ boder:boderStyle,width:widthStyle }"></div>
//在data数据中
var vm=new Vue({
el:" ",
data:{
boderStyle:" 1px solid #red"
widthStyle:" 10px"
}
})

数组语法
<div v-bind:style="[ baseStyles, ]">

var vm=new Vue({
el:" ",
data:{
baseStyles: {
color: 'red',
fontSize: '30px'
},
}
})

分支循环结构

1 分支结构

  • v-if
  • v-else
  • v-else-if
  • v-show
    2 v-if 与v-show的区别
  • v-if控制元素是否渲染到页面
  • v-show控制元素是否显示（已经渲染到了页面）display:none

分支循环结构

循环结构

  • v-for 遍历数组
    <li v-for=" item in 数组名">{{item}}</li>
    <li v-for="(item,index) in 数组名">{{item+"--------"+index}}</li>
    <li :key="item.id" v-for="(item,index) in 数组名" >{{item}}+"--------"+{{index}}</li>
    如果item没有id的属性值，那就用index
  • 循环结构遍历对象
  • v-for 遍历对象
    <div v-for='( value,key,index) in object '></div>
  • v-if和v-for不建议结合使用 还可以加上 :key
    key 的作用
  • key来给每个节点做一个唯一标识
  • key的作用主要是为了高效的更新虚拟DOM
    <div v-if="value==12" :key="i" v-for="(value,key,index) in object"></div>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容