Vue-1 核心基础

最新推荐文章于 2024-05-09 10:29:14 发布

VIP文章学_

最新推荐文章于 2024-05-09 10:29:14 发布

阅读量280

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_17368835/article/details/125685257

版权

指令
v-html
v-text
v-bind/:
v-on/@
v-if/v-show
v-for&:key

        使用javascript代码操作html元素，操作内容，样式，属性，事件
          - 操作内容
             原生: 获取h2, innerHTML  innerText    $().html()  $().text()
             vue: 1. {
    {数据}}  模板插件
                    指令 (Directives) 是带有 v- 前缀的特殊属性
                  2. v-html 
                  3. v-text
         - 操作属性
             原生: setAttribute(属性，属性值)  getAttribute(属性)
             vue:  v-bind

         - 操作样式
             原生: style.样式名   className   classList.add()
             vue:  值：字符串  对象  数组

         - 操作事件
             原生:  绑定  赋值值， 监听
             vue:  v-on:事件名=事件处理函数

v-model

@input="conent = event.target.value"  输入框 -> 数据
:value = "content"                    输入框 <- 数据

v-clock

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

修饰符

        事件修饰符   prevent     <form @submit.prevent="onSubmit()" >
                               <a href="#" @click.prevent="">
                    stop       <div>
                                  <button @click.stop=>按钮</button>
                               </div>
                    self
                    capture

        表单修饰符       number    <input type="text"  v-model.number=""
                   trim
                   lazy

计算属性computed和侦听watch

计算属性 computed

computed:{
       
    //完整写法
    fullName:{
       
        get(){
       
            ...
        },
        set(){
       
            ...
        }
    }
    //简写(只有get的时候)
      getNumber(){
       
          ...
      }

}