Vue基础学习

admin • • 前端

什么是Vue

一套用于构建用户界面的渐进式JS框架

Vue的特点

  1. 采用组件化模式，提高代码复用率、且让代码更好维护
  2. 声明式编码，让编码人员无需直接操作DOM、提高开发效率 也就是从命令式编码编程声明式编码
  3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM结点

Vue的基本使用

引入Vue

    <script type="text/javascript" src="../js/vue.js"></script>

准备一个容器

  <div id="root">
        <h1>你好呀，{{name}}</h1>
  </div>

阻止Vue在启动时生成生产提示

  Vue.config.productionTip = false

 创建一个Vue实例


new Vue({
      el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
      data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时写一个对象
          name:'尚硅谷'
      }
 })

数据绑定和数据代理

 模版语法

插值语法 ：{{ }}

插值 用于指定标签体，也就是标签中间的内容
{{js表达式}} 可以直接读取data中的所有属性

指令语法： v-bind

  • 单向绑定 ---- v-bind

数据只能从data流向页面

v-bind给可以标签里的标签属性动态的去绑定值

简写 “ ： ”

  • 双向绑定 ---- v-model

数据不仅能从data流向页面，还可以从页面流向data

v-model:value 可以简写为v-model因为v-model默认收集的就是value值

只能运用在表单类（输入类）元素   input、select

el的两种写法

 方法一：

  // new Vue({
      el: '#root',
      data: {
          name: 'jack',
          school: {
               name: '尚硅谷',
               url: 'http://www/atguigu.com',
           }
        }
     })

方法二：

 const vm = new Vue({
            data: {
                name: 'jack',
                school: {
                    name: '尚硅谷',
                    url: 'http://www/atguigu.com',
                }
            }
        })
 vm.$mount('#root')

data的两种写法

写法一：对象式

new Vue({
   el:'#root',
   data:{
       name:'nihao',
    }
})

写法二：函数式

函数式 里面的this指向的式Vue实例对象
一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this指向就不再是Vue实例了
函数尽量写普通函数

new Vue({
   el:'#root',
   data(){
        return{
            name:'你好'，
         }
})

 MVVM模型

  1. M:模型：data中的数据
  2. V：视图：模版代码
  3. VM：视图模型：Vue实例

 数据代理

  1. Vue中的数据代理：是通过vm对象来代理data对象中属性的操作（读/写）
  2. Vue中的数据代理的好处：更加方便的操作data中的数据
  3. 基本原理：通过object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在getter或setter内部去操作（读/写）data中对应的属性

 

 事件处理

事件的基本使用

  1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，不要用箭头函数！否则this就不是vm了，而是window
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
  5. @click=“demo”和@click=“demo($event，20)”效果一样，但后者可以传递参数
<body>
    <div id="root">
        <h2>欢迎来到{{name}}</h2>
        <button v-on:click="showInfo">点击1</button>
        <button @click="showInfo2($event,20)">点击2</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        },
        methods: {
            showInfo() {
                alert('你好')
            },
            showInfo2(event, number) {
                // alert('你好')
                console.log(event ,number);
            }
        }
    })
</script>

事件修饰符

常用的三个 

  1.  @click.prevent 阻止默认行为
  2.  @click.stop 阻止事件冒泡
  3.  @click.once 事件只触发一次
<div id="root">
        <h2>欢迎来到{{name}}</h2>
        <!-- 阻止默认事件（常用） -->
        <a href="http://www.baidu.com" @click.prevent="showInof">点我提示信息</a>
        <!-- 阻止事件冒泡 （常用） -->
        <div class="demo1" @click="showInof">
            <button @click.stop="showInof">点我提示信息</button>
        </div>
        <!-- 事件只触发一次 （常用） -->
        <button @click.once="showInof">此事件只触发一次</button>
        <!-- 事件捕获阶段  -->
        <div class="d1" @click.capture="showmsg(1)">
            div1
            <div class="d2" @click="showmsg(2)">
                div2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInof">
            <button @click="showInof">点我提示信息</button>
        </div>
        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- wheel鼠标滚轮滚动,scroll是滚动条滚动 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

键盘事件

Vue中常用的按键别名

  1. 回车=>enter
  2. 删除=>delete
  3. 退出=>esc
  4. 空格=>space
  5. 换行=>tab[特殊，必须搭配keydown去使用]
  6. 上=>up
  7. 下=>down
  8. 左=>left
  9. 右=>right
<input type="text" placeholder ="按下esc提示输入" @keyup.esc="showInfo">

tab是让当前的元素 失去对该元素的焦点

<input type="text" placeholder ="按下回车提示输入" @keydown.tab="showInfo">
  • Vue为提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta

搭配keyup使用：     按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
搭配keydown使用：正常触发事件

  • 也可以使用keyCode去指定具体的按键（不推荐）@keyup.13
  • Vue.config.keyCodes.自定义键名=键码 ，也可以去定制按键别名
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>