专栏首页生南星浅谈Vue--直接引入Vue.js实现简单地开发

浅谈Vue--直接引入Vue.js实现简单地开发

1. Vue介绍

Vue是一个MVVM的JavaScript框架; ViewModel负责逻辑的实现,把Model里的数据传递给View,实现视图层与数据层的解耦

2.Vue的开发方式: 2.1 通过直接引入Vue.js实现简单地开发

引入vue.js文件: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

基本框架:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本框架</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript">
        let app = new Vue({
           el:'#app',
           data:{},
           methods:{},
        });
</script>
</body>
</html>

2.2 使用Vue CLI脚手架工具进行开发

3. Vue的数据绑定

3.1 值绑定

3.1.1 {{}} -- 插值表达式

<h2>{{msg}}</h2>

//script里的data
data:{
msg:'Hello, Vue!',
},

3.1.2 使用 v-text 和 v-html 进行数据绑定

注意 -- v-text和v-html的区别: v-text会将数据原样输出(插值表达式也会将数据原样输出) v-html如果数据里有标签,会将其解析在输出

文本闪烁问题: 当我们使用外部引入vue.js的方式进行开发时,如果vue.js文件没有及时加载,导致系统无法识别vue的语法,原vue语法会原样输出 解决办法: 1.在head标签里引入vue.js文件 2.使用v-cloak指令专门用来解决文本闪烁问题. 我们自己会给添加了v-cloak指令的元素设置 display:none;先让其元素隐藏,等到vue.js文件加载之后v-cloak起效果,会将之前隐藏的元素 display设置为 block.

3.2 属性绑定

在vue里,属性不区分HTML属性和DOM属性

3.2.1 语法: v-bind: 属性名='值' 简写为 :属性名='值'

3.2.2 动态绑定元素样式

动态绑定class属性 -- :class='对象/数组'

动态绑定style属性 -- :style='对象/数组'

<style type="text/css">
      [v-cloak] {
          display: none;
      }
        img{
            width: 600px;
            height: 300px;
        }
        .bgc{
            background-color: #fff6d6;
        }
        .fontS{
            font-size: 25px;
        }
        .fontC{
            color: red;
        }
</style>

<body>
  <div class="div1" :class="{bgc:true,fontC:true}">
     class属性绑定值是对象
  </div>
  <div class="div1" :class="['bgc','fontS','fontC']">
      class属性绑定值是数组
   </div>
    <p :style="{width:'200px',height:'200px',backgroundColor:'#B6CCC8'}">
       style属性绑定对象
    </p>
    <p :style="[{width:'200px'},{height:'200px'},{backgroundColor:'#B6CCC8'},{border:'1px solid black'}]">
       style属性绑定数组
    </p>
</body>

3.3 事件绑定 语法 -- v-on: 事件名='表达式', 如果值是 '函数名()',小括号可加(传参)可不加(不传参) 简写-- @事件名='表达式'

vue的事件修饰符 1.普通事件 stop:阻止事件的传播 prevent:阻止默认事件的执行 once:一次性事件 2.键盘事件

<h3>普通事件</h3>
<div @click="parentClick">
    <button @click.stop="btnClick">子级按钮</button>
    <a href="http://www/baidu.com" @click.prevent>点击跳转百度</a>
    <button @click.once.stop="onceClick" :disabled="disAble">一次点击</button>
</div>

<h3>键盘事件</h3>
<input type="text" @keyup.left.right="keyInput">


//script里的methods
     methods:{
         parentClick(){
             alert('父级事件被触发!')
          },
          btnClick(){
             alert('子级事件被触发!')
          },
          onceClick(){
              this.disAble=true
          },
          keyInput(){
              console.log('键盘抬起!')
           }
      }

3.4 双向数据绑定

v-model='变量'

<!--双向数据绑定-->
        <fieldset>
            <legend><h1>双向数据绑定</h1></legend>
            <input type="text" v-model="inputV">
            <p>{{inputV}}</p>
        </fieldset>
        
//script里的data
data:{
   inputV:'默认值',
},

4. Vue指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--
        1.v-if 控制元素的显隐
            v-if和v-show的区别:
            v-if真正意义上从dom树种移除或者增加元素
            v-show只是控制元素的display样式
        -->
        <h2 v-if="false">我是v-if的h2标签</h2>
        <h2 v-show="false">我是v-show的h2标签</h2>
        <hr/>
        
        <!--
        2.v-for 列表渲染
            语法:
            v-for='(集合里的值,下标) in 集合'
        :key  vue是虚拟DOM,设置key可以提高浏览器的渲染效率,key的值一般给数据里能起到唯一标识作用的值,如果没有,也可以给index
        -->
        <ul>
            <li v-for="(per,index) in infoArr" :key="index">
                <span>这是第{{index+1}}个人的信息</span>
                <span>{{per.name}}</span>
                <span>{{per.age}}</span>
                <span>{{per.sex}}</span>
            </li>
        </ul>
        
        <!--
        结合template标签实现v-for的列表渲染
        template标签在渲染时不会被加载
        template标签不能加key属性
        -->
    
        <ul>
            <template v-for="(per,index) in infoArr">
                <span>这是第{{index+1}}个人的信息</span>
                <span>{{per.name}}</span>
                <span>{{per.age}}</span>
                <span>{{per.sex}}</span>
            </template>
        </ul>
    </div>
    
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                infoArr:[
                    {name:'阿音',age:22,sex:'女'},
                    {name:'朱一龙',age:31,sex:'男'},
                    {name:'白宇',age:29,sex:'男'},
                    {name:'李白',age:50,sex:'男'},
                    {name:'纳兰容若',age:40,sex:'男'}
                ]
            },
            methods:{
            
            }
        })
</script>
</body>
</html>

5. Vue数组和对象的监测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组和对象的监测</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="v in dataArr">{{v}}</li>
        </ul>
        <ul>
            <li v-for="item in perArr">{{item.name}}</li>
        </ul>
        <button @click="btnClick">点击</button>
        <button @click="changeV">点击改变数组里的值</button>
        <button @click="changePerV">点击改变per数组里的值</button>
        <hr>
        <p v-for="(value, key) in person">{{value+'---'+key}}</p>
        <button @click="person.age = 50">点击修改person的age</button>
        <button @click="addKV">点击添加键值对</button>
        <button @click="replacePerson">点击整体替换person</button>
        <button @click="deleteHobby">点击删除hobby</button>
    </div>
    <!--
    关于vue里数组和对象的监测:
    1.数据的更新监测
        以下方法操作数组,都可以引起页面的直接更新渲染
        push,pop,unshift,shift,splice,sort,reverse
        
        以下方法操作数组,不会引起页面的直接更新渲染,除非再给原数组重新赋值一遍
        filter,map,concat,slice
        
        只修改数组里的值,也不会引起页面的重新渲染
        解决办法:
        写法1:Vue.set(数组,下标,新值);
        写法2: Vue实例,$set(数组,下标,新值)
        
     2.对象的监测
        通过已有的key更新value或者直接整体替换对象都可以引起页面的更新渲染,但是给对象新增键值对不会引起页面的更新渲染
        
        解决方法:
        写法一: Vue.set(对象,新key,新value)
        一次添加多个键值对
        Object.assign({},对象,{多个键值对})
        
        写法二:
        Vue实例.$set(对象,新key,新value);
        
        删除键值对
        写法1: Vue.delete(对象,key)
        写法2: Vue实例.$delete(对象,key)
    -->
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                dataArr:[1, 2, 3, 4, 5],
                perArr:[
                    {name:"abc"},
                    {name:"def"},
                    {name:"ghi"}
                ],
                person:{
                    name:'蔡徐坤',
                    age:20,
                    sex:'男',
                    hobby:'篮球,rap'
                }
            },
            methods:{
                btnClick() {
                    this.dataArr = this.dataArr.filter(function (v) {
                        return v > 3;
                    })
                },
                changeV() {
                    //不能实现
                    // this.dataArr[0] = 100;
                    Vue.set(this.dataArr,0,100);
                },
                changePerV() {
                    //能实现
                    // this.perArr[0].name = "阿音";
                    //不能实现
                    // this.perArr[1] = {name:'阿音'};
                    app.$set(this.perArr,1,{name:'阿音'});
                },
                addKV() {
                    //不能实现
                    // this.person.id = '队长';
                    // console.log(this.person);
                    
                    // Vue.set(this.person,'id','队长');
                    
                    // this.person=Object.assign({},this.person,{id:'对象',team:'NBA'});
                    
                    // this.person={...this.person,id:'对象',team:'NBA'};
                    
                    app.$set(this.person,'id','啦啦队');
                },
                replacePerson() {
                    this.person = {name:'吴亦凡', hobby:'rap', project:'你看这个碗它又大又圆'};
                },
                deleteHobby(){
                    Vue.delete(this.person,'hobby');
                }
            }
        })
</script>
</body>
</html>

本文分享自微信公众号 - 生南星(gh_36d61425a5dc),作者:生南星

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue项目小点(二)

    1.解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题

    生南星
  • 微信开发--微信小程序(二)

    相信大家都使用过微信小程序,那一定都知道微信小程序下拉刷新吧,其实下拉刷新是微信小程序自带的功能,只不过没有背景图看不出来而已,好坑诶.

    生南星
  • vue项目简书(二)

    网址: https://github.com/semlinker/reactjs-interview-questions

    生南星
  • Vue中的$set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发...

    李文杨
  • 重温计算机简史:从石头计数到计算机

    大数据文摘
  • “节流函数”提高性能

    浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。 高频率的更改...

    前端黑板报
  • Vue的生命周期和前端路由使用

    近半年来,我一直从事一个报表管理系统的开发。管理系统是给人用的,但我们团队并没有前端,所以我就兼任了大部分前端开发工作。在这半年的开发工作中,我学习了一些前端内...

    zhangheng
  • 048.集群管理-资源限制实践

    集群管理员根据集群用户的数量来调整集群配置,以达到这个目的:能控制特定命名空间中的资源使用量,最终实现集群的公平使用和成本控制。

    木二
  • 多目标跟踪 | FairMOT:统一检测、重识别的多目标跟踪框架,全新Baseline

    论文地址:https://arxiv.org/pdf/2004.01888v2.pdf

    AI算法修炼营
  • 数据库MySQL-函数

    cwl_java

扫码关注云+社区

领取腾讯云代金券