Vue（一）

最新推荐文章于 2022-12-05 15:09:44 发布

kcorih

最新推荐文章于 2022-12-05 15:09:44 发布

阅读量265

点赞数 2

分类专栏： Vue 文章标签： Vue 前端

本文链接：https://blog.csdn.net/kcorih/article/details/99327520

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是vue？

vue是一款用于构建用户界面的渐进式框架。

MVC和MVCC

谈及vue，我们不如先来比较下MVC和MVVM

MVC

在这里插入图片描述
MVC ——全名Model View Controller，MVC用于解决后端问题，其中V是视图，C是控制器，M是数据模型。其中C是中间桥梁，能够让view与model进行交互。

MVVM ——全名Model View ViewModel，MVVM用于处理前端问题，其中VM起着让视图与数据模型交互的作用。

安装

我们可以通过cnpm install vue --save 进行安装
，然后引用即可

<script src="../node_modules/vue/dist/vue.min.js"></script>

我们来开始通过vue写一个简单的例子，
比如先写一个双向绑定数据

<body>
    <div id="app">
        <input type="text"  v-model="msg">{{msg}}
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        var um=new Vue({
            el:"#app",
            data:{
                msg:''
            }
        })
    </script>
</body>

这里实现了数据的双向绑定，会根据input的输入及时更新后面的内容。但是当我们快速刷新界面的时候，会发现文本框后面先出现{{msg}}再出现input的内容，这是因为文本是从上往下顺序解析的，先读取了{{msg}}，然后再给它赋值。
在这里插入图片描述
解决方案 v-cloak

  	<style>
    [v-cloak]{
        display: none;
    }
    </style>

 <div id="app" v-cloak>

通过v-cloak,当vue解析完成后，渲染出来div。
v-cloak 通常用开来解决页面加载时闪烁出现vue标签或者指令的问题。

指令 directive

什么叫做指令？指令相当与标签上的自定义属性
常见的有
v-model
数据双向绑定指令，一般用于input

	<div id="app" v-cloak>
        <input type="text" v-model="msg">{{msg}}    
    </div>

v-bind
动态绑定属性 === ：

  <div id="app" v-cloak>
           <img v-bind:src="imageUrl" alt="">
  </div>

v-once
执行一次

v-html
解析html

	<div id="app" v-cloak>
        <div v-html="myhtml"></div>
    </div>

v-on
监听、绑定事件 ===@

	<div id="app" v-cloak>
        <button v-on:click="alert('fly')">can</button>  
    </div>

v-text
文本

	<div id="app" v-cloak>
         <span v-text="msg"></span>   
    </div>

这样便可以弃掉可观性不佳的{{****}}了。
v-for
循环

<body>
    <div id="app">
        <ul>
            <!-- 循坏数组 -->
            <li v-for='(item,index) in arr'>---{{index}}===={{item}}</li>
            <!-- 遍历字符串 -->
            <li v-for="item in 'hdasjdhakjhweourhsddf'">{{item}}</li>
            <!-- 遍历对象 -->
            <li v-for="(item,key) in {name:'yan',age:20}">{{key}}:{{item}}</li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                arr:[1,2,3,3,23,2312,4]
            }
        })
    </script>
</body>

我们再来做一个todoList双向绑定加监听加循环的例子

<body>
    <div id="app">
            <input type="text" v-model="msg" @keyup.enter="addTodo">
            <ul>
                <li v-for="(item,index) in arr">{{item}} <button @click='deleteTodo(index)'>删除</button></li>
            </ul>
    </div>
    
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                arr: [],
                msg: ''
            },
            methods: {
                    addTodo() {
                        console.log(this.msg)
                        this.arr.push(this.msg);
                        this.msg = '';
                    },
                    deleteTodo(index) {
                        this.arr.splice(index, 1)
                    }
                }
        })
    </script>
</body>

loading…

kcorih

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue（一）

什么是vue？vue是一款用于构建用户界面的渐进式框架。MVC和MVCC谈及vue，我们不如先来比较下MVC和MVVMMVCMVC ——全名Model View Controller，MVC用于解决后端问题，其中V是视图，C是控制器，M是数据模型。其中C是中间桥梁，能够让view与model进行交互。MVVM ——全名Model View ViewModel，MVVM用于处理前端...
复制链接

扫一扫

专栏目录