zoukankan      html  css  js  c++  java
  • Vue简介与基础

    一、什么是Vue.js

    Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
    Vue.js 是前端的**主流框架之一**,和Angular.js、React.js 一起,并成为前端三大主流框架!
    Vue.js 是一套构建用户界面的框架,**只关注视图层**,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)

    vue基本代码展示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    <div id="app">
     <h1>{{ msg }}</h1>
     <input type="button" :value="msg" @click="hello">
    </div>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello vue',
            },
            methods:{
                hello: function(){
                    alert('hello vue')
                }
            },
        })
    </script>
    </body>
    </html>

    二、vue常用指令

    1、v-bind(用于绑定属性的指令)

    v-bind简写: :(':'符号)

    <input type="button" value="按钮1" v-bind:title="mytitle + '123'"> 
    <input type="button" value="按钮2" :title="mytitle + '123'">

     2、v-on(事件绑定机制)

     v-on简写: @

    <input type="button" value="按钮" v-on:click="show">
    <input type="button" value="按钮" @click="show">

    3、v-cloak(防止闪烁)

    <p v-cloak>++++++ {{ msg }} ----------</p> 
    <h4 v-text="msg">==================</h4>
    <!-- 默认 v-text 是没有闪烁问题的 -->

     4、v-text( 解析文本) 

    <span v-text="msg"></span>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span>

    5、v-html(解析html标签)

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

    6、v-model(多用于表单元素实现双向数据绑定)

    <h4>{{ msg }}</h4>
    <input type="text" style="100%;" v-model="msg">
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'aaaaaaaaaaaaa'
          },
          methods: {
          }
        });
      </script>

    7、v-show( 显示内容)
    8、v-if(显示与隐藏)

    例子:(7、8的例子)

    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
    <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
        });
      </script>

    9、v-else-if(必须和v-if连用)

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

    10、v-else(必须和v-if连用)

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

    11、v-once(进入页面时 只渲染一次 不在进行渲染)

    <div v-once>
      <h1>comment</h1>
      <p>{{msg}}</p>//加载后,数据不会再更改了
    </div>

    12、v-pre(把标签内部的元素原位输出,不解析)

    <div v-pre>{{msg}}</div>//结果还是{{msg}}

    13、v-for(循环)

    <div id="app">
        <!-- 循环数组-->
        <p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
        <!-- 循环对象数组-->
        <p v-for="(user, i) in list2">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}</p>
        <!-- 循环对象-->
        <p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p>
        <!-- 循环数字-->
        <p v-for="count in 10">这是第 {{ count }} 次循环</p>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            list: [1, 2, 3, 4, 5, 6]
          ,
            list2: [
                 { id: 1, name: 'zs1' },
                 { id: 2, name: 'zs2' },
                 { id: 3, name: 'zs3' },
                 { id: 4, name: 'zs4' }
            ],
            user: {
                 id: 1,
                 name: '汤姆·杰克',
                 gender: ''
            }
          },
            
          methods: {}
        });
      </script>

    三、vue样式

    1、class三种绑定方法

    (1)直接传递一个数组
    <h1 :class="['thin', 'italic']">1111</h1>
    
    (2)使用三元表达式
    <h1 :class="['thin', 'italic', flag?'active':'']">1111</h1>
    
    (3)在数组中使用对象来代替三元表达式
    <h1 :class="['thin', 'italic', {'active':flag} ]">1111</h1> 

    例子:

    <h1 :class="classObj">11111</h1>
    
    <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: true,
            classObj: { red: true, thin: true, italic: false, active: false }
          },
          methods: {}
        });
    </script>

    2、vue中使用style

    <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
    <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            styleObj1: { color: 'red', 'font-weight': 200 },
            styleObj2: { 'font-style': 'italic' }
          },
          methods: {}
        });
    </script>

    三、事件修饰符

    .stop - 阻止冒泡
    .prevent - 阻止默认事件
    .capture - 添加事件侦听器时使用事件捕获模式
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

    使用例子

    <!-- 使用.stop 阻止冒泡(阻止上级所有层的事件)仅son -->
    <div class="father" @click="father">
            <div class="son" @click.stop="son"></div>
    </div>

    四、v-for与v-if优先级

    当它们处于同一节点,v-for 的优先级比 v-if 更高。

  • 相关阅读:
    Server Tomcat v8.0 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.
    用户画像——“打标签”
    python replace函数替换无效问题
    python向mysql插入数据一直报TypeError: must be real number,not str
    《亿级用户下的新浪微博平台架构》读后感
    【2-10】标准 2 维表问题
    【2-8】集合划分问题(给定要分成几个集合)
    【2-7】集合划分问题
    【2-6】排列的字典序问题
    【2-5】有重复元素的排列问题
  • 原文地址:https://www.cnblogs.com/zhangb8042/p/11126144.html
Copyright © 2011-2022 走看看