Vue的使用和常用指令

最新推荐文章于 2022-07-02 15:25:22 发布

翟相劝

最新推荐文章于 2022-07-02 15:25:22 发布

阅读量243

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46393542/article/details/104473289

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js 是什么？
很多学习Vue的小伙伴都活有这样的疑惑，通常我认为Vue是了不起的，为什么了不起？因为它能干你的事情实在是太多了。
一、了不起的Vue
1.简单介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.Vue的渐进式
框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。
一个个放入了多少,你的项目就做多少。

二、Vue的安装
尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

直接下载并用

 * `<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`

命令行工具vue cli Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

 *  npm install ‐g @vue/cli

三、Vue的数据绑定原理
在这里插入图片描述
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

注意：vue3 的变化
Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map 变化；
2、无法监听Class类型的数据；
3、属性的新加或者删除也无法监听；
4、数组元素的增加和删除也无法监听。

Vue—常用的指令
这里简单的和大家介绍下Vue项目中常用的指令：
1、v-html
v-html指令主要是用于更新元素的innerHTML。例如下面的写法，myname里面的的标签在有指令v-html之后，标签会被页面渲染出来，属性的内容也会被渲染到页面上。

<body>
    <div id="box">
        <p v-html='myname'></p>
    </div>

</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myname:'<b>我的名字</b>'
        }
    })
</script>

2、v-if
v-if指令动态创建/删除元素模块，根据属性值true/false控制元素是否被渲染在页面上。例如myif属性值为true,标签显示在页面上，myif属性值为false，标签不会被渲染出来。

<body>
    <div id="box">
        <p v-if='myif'>我是v-if</p>
    </div>

</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myif:true
        }
    })
</script>

3、v-show
v-show指令动态显示/隐藏，根据属性值true/false控制元素是否被渲染在页面上。例如myshow属性值为true,标签显示在页面上，myshow属性值为false，标签不会被渲染出来。

<body>
    <div id="box">
        <p v-show='myshow'>我是v-show</p>
    </div>

</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myshow:true
        }
    })
</script>

4、v-bind
v-bind指令用于动态绑定DOM元素的属性，可以缩写成" : " 。任何属性方法需要动态获取都可以使用" : "，例如<img>标签的src属性，<a>标签的href属性。

<!-- v-bind动态绑定属性 -->
        <div v-bind:class="isRed?'myyellow':'myred'">11111111</div>
        <a :class="isRed?'myyellow':'myred'">11111111</a>
        <img v-bind:src="myimg1">
        var vm =new Vue({
    el:'#box',
    data:{
        mycolor:'myyellow',
        isRed:true,
    },
})

</script>

5、v-on
v-on指令用于绑定监听事件，可以简写@。下面用click事件进行举例，点击1/点击2都可以再控制台打印'666'。

<!-- v-on绑定事件 -->
        <button v-on:click='handClick()'>点击1</button>
        <button @click='handClick()'>点击2</button>
        var vm =new Vue({
    el:'#box',
    data:{
        myname:'张三',
        mycolor:'myyellow',
        isRed:true,
    },
    methods:{
        handClick(){
            console.log(6666)
        }
    }
})

6、v-for
v-for指令用于遍历循环数组数据，实现列表类的渲染，一般情况下遍历列表后需要加：key值，代表唯一的id，类适于身份证。

<body>
    <div id="box">
        <!-- v-for循环 -->
        <ul>
            <li v-for='(item,index) in mylist' ：key="index">{{item}}</li>
        </ul>
    </div>
</body>

<script>
var vm =new Vue({
    el:'#box',
    data:{
    mylist:['111','2222','333'],
    }
})
</script>

7、v-model
v-model 指令用于表单的双向绑定。
在input中绑定v-model可以很轻松的获取到input中的val值。

<body>
    <div id="box">
      <input type="text"  v-model='mymodel'  @input="app()">
    </div>
</body>

<script>
var vm =new Vue({
    el:'#box',
    data:{
    mymodel:''
    },
    methods:{
        app(){  
       console.log(this.mymodel)
       // 可以直接获取到input中的val值
            }
        }
})
</script>

8、v-else
v-else 指令一般和v-if配合使用，用于购物车页面作为常见，这里给大家简单说明下，v-else和v-if表示如果mylist.length为真显示购物车列表，如果mylist.length值为假页面渲染 “空空如也···”。

<body>
    <div id="box">
        <div v-if='mylist.length'>
            <ul>
                <li v-for='item in mylist'>{{item}}</li>
            </ul>
        </div>
        <div v-else>空开如也···</div>
        <div v-if='type===1'>卖家付款</div>
        <div v-if='type===2'>卖家发货</div>
        <div v-if='type===3'>卖家收货</div>
        <div v-else>未下单</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myif: true,
            mylist: ['111', '2222', '33333'],
            type: 0,
        }
    })
</script>

这里简单和大家介绍到这里，常用的基本上都在，我也是刚学习Vue知识，不定期会进行更新把自己学习的知识点进行总结和大家分享。

翟相劝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的使用和常用指令

Vue.js 是什么？很多学习Vue的小伙伴都活有这样的疑惑，通常我认为Vue是了不起的，为什么了不起？因为它能干你的事情实在是太多了。一、了不起的Vue1.简单介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合...
复制链接

扫一扫