Vue.js - 1 - 苦海无涯 - SegmentFault 思否

初识vue

    <!--首先在页面中引入vue.js文件-->
    <!--HTML页面相当于mvvm结构的view层-->
    <!--这种mvvm的展现数据的方式:数据驱动页面闪现,data中数据如果发生改变,页面同时跟着改变.-->
    <body>
        <div id="app">
            <!--在本作用域中完成项目的所有业务逻辑.-->
              <!--利用插值表达式{{}}将数据展示在页面上-->
            {{msg}} <!--Hello Vue.js！-->
        </div>
    <script type="text/javascript">
        new Vue({
            //规定作用域
            el:"#app",
            //放置所有数据
            data:{
                msg:"Hello Vue.js！"
            }
        });
    </script>
    </body>

插值运算符{{ }}

插值表达式中,除了null和undefined都可以展现到页面上.
js中的关键字不能在插值运算符中使用,包括var , if , for
在{{ }}中可以进行简单的运算,判断时可以使用三元运算符,可以用一些js原生的方法.
{{ }}中只能使用不改变原数组的方法.

指令(1)

v-text

v-text与{{ }}一样用于展现数据.
{{ }}是v-text的缩写形式,一般情况下 {{}}和v-text通用.
插值表达式在先加载html后加载vue.js框架的情况下,可能会出现{{}}一个很丑标记,而v-text内部进行了处理,在数据加载完之前,先将元素进行隐藏.

v-html

v-html同样也是用于展示数据.
与{{ }}和v-text区别在于v-html会编译字符串中的标签,{{ }}和v-text不会.

    <div id="app">
          <!--v-html会编译字符串中的标签,{{}}和v-text不会-->
        <div v-text="msg"></div> <!-- 显示：<p>Hello World</p> -->
        <div v-html="msg"></div> <!-- 显示：Hello World -->
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                   msg:"<p>Hello World</p>"
            }
        })
    </script>

v-cloak

    /* 当插值表达式{{ }}在先加载html后加载vue.js框架的情况下使用时，
    可能会先出现{{ }} 标记再把数据渲染出来，导致一个页面闪烁问题. */
    /* 解决方法: 1. 在{{ }}外套一个标签,标签上挂载v-cloak指令
               2. 在style标签中书写相应样式:*/
                例： <style>
                        [v-cloak]{
                              display: none;
                         }
                       </style>
    
                    /*在作用域里写*/
                    <div v-cloak>
                        {{sayHi}}
                    </div>

v-on

与原生js相比,就是把on变成v-on
v-on可以缩写成@

    <div id="app">
          <button v-on:click="dothis()">点我</button>
          <button @click="dothis()">点我</button>
          <!--在没有参数的情况下,函数后边的小括号可加可不加.-->
          <button @click="dothis">点我</button>
          <!-- 点击按钮count值自增 -->
         {{count}} 
          <!--页面上放置的数据,在data中是绑定起来的-->
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                count: 1
            },
           // methods属性用于添加函数
            methods: {
                dothis: function () {
                // 如何在methods的函数中获取到data值,前边加this
                    this.count++
                }
            }
        })
    </script>

事件修饰符

.stop

.stop是简便方法阻止事件冒泡.
如果想在参数中传递原生event对象,可以使用$event内置方法.

    <div id="app">
          <!--添加事件的修饰符-->
        <div @click="doTwo">
            外层父容器
            <div @click.stop="doOne('hello',$event)">
                内层子节点
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {},
            methods: {
                doOne: function () {
                    alert("内层子节点");
                },
                doTwo: function () {
                    alert('外层父容器');
                }
            }
        })
    </script>

.prevent

.prevent用于取消默认事件.

    <div id="app">
          <!--取消了a标签的默认跳转,弹出alert内容,点击确认后页面不会跳转了-->
        <a href="http://baidu.com" @click.prevent="pre">点我跳啊!</a>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {},
            methods: {
                  pre(){
                    alert("禁止默认事件.prevent");
                }
            }
        })
    </script>

keyCode

keycode修饰符用于键盘事件制定按键功能.

    <div id="app">
          <!-- keydown 和 keyup 都可以触发 -->
          <!-- enter键对应的是数字13 -->
          <input type="text" @keyup.13="keyc">
        <input type="text" @keyup.enter="keyc">
        <input type="text" @keydown.login="keyc">
    </div>
    <script>
          //自定义配置按键名称
        Vue.config.keyCodes.login = 13;
        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            methods: {
                  keyc: function () {
                    alert("键盘事件修饰符");
                }
            }
        })
    </script>

指令(2)

v-bind

v-bind是绑定属性用的.
例：↓ ↓ ↓

    <style>
            .div1 {
                background-color: red;
            }
    
            .div2 {
                color: yellow
            }
    </style>

    <div id="app">
          <!--v-bind将data中的值注入到标签的属性上-->
          <div v-bind:id="id">Hello</div>  <!-- <div id="div1">123</div> -->
          <!--缩写 将v-bind去掉-->
        <div :id="id">Hello</div>
      
          <!--一个静态字符串和data中的值进行组合当做a标签的href-->
        <!--v-bind后直接赋值一个字符串嵌套对象的格式,对象的key是属性名,value静态字符串与data中数据的链接-->
        <a v-bind="{'href':'http://xxx.com'+url}"></a>
          <!-- 缩写 -->
          <a :href="'http://xxx.com'+url"></a>
      
          <!--下边这两种写法等价-->
        <div class="div1 div2">Hello</div>
        <div :class="[color1,color2]">Hello</div>
        <!-- 下面这种写法会报错，因为会把"color1 color2" 识别成一个值 -->
        <!-- <div :class="color1 color2">Hello</div> -->
      
          <!--动态绑定style 行内样式-->
          <div v-bind:style="[style1,style2]">Hello</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                id: "div1",
                url: "/aa/bb",
                color1: "div1",
                color2: "div2",
                style1:{color:"pink"},
                style2:{'background-color':'skyblue'}
            }
        })
    </script>

v-for

循环遍历
案例：将data中的数据带入到页面的li上.

    <div id="app">
        <ul>
            <!--基础用法-->
            <!--v-for的使用方法 in运算符前是数组的每一项,这个变量自己可以随便定义-->
            <!--in运算符后边是data的数据,因为我们是渲染列表,所以,数据只能是数组类型和对象类型-->
            <li v-for="item in arr">{{item}}</li>
        </ul>
                <!-- 
                显示：
                        1
                        1
                        1
                -->
        <ul>
            <!--循环数组时,如果in运算符前边是(),可以接受两个参数-->
            <!--第一个是数组中的每一项,第二个参数,是每一项值的index索引-->
               <li v-for="(item,index) in arr">{{index}}-{{item}}</li>
       </ul>
                <!-- 
                显示：
                        0-1
                        1-1
                        2-1
                -->
        <ul>
              <!--循环对象-->
               <!--如果循环的数据是一个对象.那么in前边的小括号内第一个参数是对象的每一个值value,第二个参数是每一个值的key键,三个参数是索引index-->
            <li v-for="(value,key,index) in obj">{{index}}-{{key}}-{{value}}</li>
        </ul>
                <!-- 
                显示：
                        0-a-1
                        1-b-2
                        2-c-3
                -->
        <!--diff算法.key值是当数据重新渲染时,提高运行效率用的.原则上写v-for时给加上-->
        <button @click="changeArr">点我item加1</button>
          <ul>
            <li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
        </ul>
                <!-- 
                点击按钮item自增：
                        0-item
                        1-item
                        2-item
                -->
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                arr: [1,1,1],
                obj:{a:1,b:2,c:3}
            },
            methods:{
                changeArr:function () {
                    //在函数中,改变data中的变量时要注意
                    //改变原数组的方法可以直接用,不改变原数组的方法需要赋值回原数组
                    //this.arr.push('d')
                    this.arr = this.arr.map(function (item, index) {
                        return item+1
                    })
    
                }
            }
        })
    </script>

v-if

v-if v-else
v-if v-else-if v-else
template标签

    <div id="app">
        <!--v-if用来控制标签的显示和隐藏,如果等号后边的data变量是true显示,false隐藏-->
        <!--v-else类似于原生js的逻辑,当v-if值为false的时候显示标签二-->
        <button @click="show">点我</button> <!-- 点击按钮触发show方法 -->
        <div v-if="sh">我是标签一</div> <!-- 当sh是true的时候默认显示 当点击上面按钮的时候sh变为false时标签一隐藏(整个标签结构都没了)-->
        <div v-else>我是标签二</div>  <!-- 标签一隐藏 显示标签二 show方法来回改变sh的值 所以标签一和标签二来回切换 -->
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                sh: true,
            },
            methods: {
                show: function () {
                      // this 指的是Vue实例对象
                    this.sh = !this.sh;  // 取反(当sh为真时改为假，反之为假时改为真)
                }
            }
        })
    </script>

    <!-- v-if v-else-if v-else 的用法  -->
    <div id="app">
        <div v-if="str =='a'">我是标签一</div>
        <div v-else-if="str =='b'">我是标签二</div>
        <div v-else>我是标签三</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                str: "b"
            }
        })
    </script>
    <!-- 当str的值是b的时候就现实标签二  -->

    <div id="app">
        <!--可以使用template标签代替div包裹多个元素,template标签不可见-->
        <button @click="show">点我啊</button>
        <template v-if="sh">
            <h1>Title111</h1>
            <p>Paragraph 222</p>
        </template>
        <template v-else>
            <h1>Title222</h1>
            <p>Paragraph 333</p>
        </template>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                sh: true,
            },
            methods: {
                show: function () {
                      // this 指的是Vue实例对象
                    this.sh = !this.sh;  // 取反(当sh为真时改为假，反之为假时改为真)
                }
            }
        })
    </script>

v-show

    <div id="app">
        <!--一般来说,一个元素进行显示隐藏用v-show,效率比较高-->
        <!--因为v-show不能和v-else和v-else-if一起使用,所以v-show只能控制一个元素的显示和隐藏-->
          <div v-show="sh">我是v-show</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                sh: true,
            },
            methods: {
                show: function () {
                      // this 指的是Vue实例对象
                    this.sh = !this.sh;  // 取反(当sh为真时改为假，反之为假时改为真)
                }
            }
        })
    </script>

单项数据绑定和双向数据绑定

单项数据绑定

    <div id="app">
        <!--v-bind单项数据绑定,改变页面的值并不影响data中的值-->
        <input type="text" :value="msg">
        <input type="text" :value="msg">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World",
            }
        })
        console.log(vm);
    </script>

双向数据绑定

    <div id="app">
        <!--不仅data中的数据可以影响到view页面,而且view页面发生改变时,同样可以改变data中的数据,这个就叫双向绑定-->
        <!--v-model内部绑定的是value,所以要求标签必须有value属性才能用-->
          <!--应用:在登录页面中可以通过双向绑定的方式,利用data中的值,获取到页面的改变-->
        <input type="text" v-model="msg">
        <input type="text" v-model="msg">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World",
            }
        })
        console.log(vm); // 改变data中msg的数据,view页面的值也跟着改变,改变view中的值,data中的msg数据也跟着改变
    </script>

v-model中的修饰符

.lazy

.number

.trim

    <div id="app">
        <!--.lazy 当光标移除文本框时 才进行双向绑定,也就是说延迟了双向绑定-->
        <input type="text" v-model.lazy="msg">
        <input type="text" v-model="msg">
    
        <!--.number 当输入的是一段数字字符串的时候,使用.number会自动转化为number类型.-->
        <button @click="getValue">获取</button>
        <input type="text" v-model.number="value">
    
        <!--.trim 去除左右两边的空格-->
        <input type="text" v-model.trim="msg">
        <input type="text" v-model="msg">
    
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello world",
                value:""
            },
            methods:{
                getValue:function () {
                    console.log(typeof this.value);
                }
            }
        })
    </script>

产品案例

功能分析

在data中定义一组数组，供我们使用，arr [ { name , time } , { name , time } , {} ] 构建一个json
v-for用遍历数组的方式将数据进行展现
添加操作，设置文本框和按钮，当点击按钮时，将文本框的数据添加到arr数据数组中，使用mvvm的渲染方式会直接改变页面的结构 ( push )
删除操作，确认删除行的index索引，传入函数中 ( splice )

   编号     品牌名称             创建时间                        操作 
   1           宝马             2017-12-1 11:11:11             删除 
   2           奥迪             2017-12-1 12:12:12             删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="引入vue.js文件"></script>
    <style>
        table {
            width: 800px;
            text-align: center;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;

        }
        table th {
            background-color: #0094ff;
            color: #fff;
        }
        table th, table td {
            border: 1px solid #000;
            padding: 2px;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text"  placeholder="品牌名称"  v-model="value"  @keyup.add="add"/>
    <button @click="add">添加数据</button>
    <table>
        <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
      
        <tr v-for="(item,index) in arr">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <!--渲染列表时的index可以传入到函数中作为每一个列表项的唯一标示-->
            <td><a href="#" @click.prevent="del(index)">删除</a></td>
        </tr>
    </table>
</div>
</body>
<script>
    Vue.config.keyCodes.add = 13;
    new Vue({
        el: "#app",
        data: {
            // 在这里定义一组数据,供展现使用
            arr: [
                {name: "宝马", time: new Date},
                {name: "奔驰", time: new Date},
                {name: "大众", time: new Date}
            ],
           //定义input上添加的数据
            value:""
        },
        methods:{
            //添加数据函数
            add:function () {
                //获取input框中的值
                var value=this.value;
               // 将input框中的value追加到arr数据中
                this.arr.push({name:value,time:new Date});
               //将input框置空
                this.value="";
            },
            del:function (index) {
              //从当前索引开始删除一个，相当于删除了本身
                this.arr.splice(index,1);
            }
        }
    })
</script>
</html>

Vue.js - 1

WeBen

引用和评论

记录 Vue CLI3 项目中解决IE浏览器语法兼容导致页面报错白屏问题

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue.js-方法与事件

Vue使用mixins

从JavaScript中看设计模式(总结)