Vue Day01 理解MVVM

最新推荐文章于 2021-06-07 10:49:49 发布

原创最新推荐文章于 2021-06-07 10:49:49 发布 · 199 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

自学之路专栏收录该内容

2 篇文章

订阅专栏

（这是第一个Vue 页面很久没有接触代码了，一切从头开始）

new Vue 创建一个Vue对象;
el 制定绑定Dom（接管DOM 操作）;
data：初始化数据，页面可以直接访问;
**v-model 重点可以实现数据双向绑定，改变了这里的值，其他地方数据也跟着改变；
{{xxxxx}}-------xxxxx显示数据``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是第一个Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text " v-model="message">
<!--        v-model 重点  可以实现数据双向绑定，改变了这里的值，其他地方也根据改变；-->
        <p>
         {{message}}
<!--            //   {{xxxx}}  取值显示数据-->
        </p>
    </div>

    <script>
        var  app=new Vue({
            el:"#app", //绑定 id=app 的Dom
            data:{
                message:"这是第一个VueJS界面"
            }
        })
    </script>
</body>
</html>

原理 mvvm
model — data的属性
View — 视图层 DOM
viewModel —vue

Vue入门

**
Vue是一个MVVM（Model / View / ViewModel）的前端框架，相对于Angular来说简单、易学上手快，近两年也也别流行，发展速度较快，已经超越Angular了。比较适用于移动端，轻量级的框架，文件小，运行速度快。最近，闲来无事，所以学习一下Vue这个流行的框架，以备后用。

一、指令
v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容（同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用否则报错模板编译错误
v-bind 动态绑定作用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出