温故知新之VUE

最新推荐文章于 2023-08-29 21:48:49 发布

置顶 yamdork93

最新推荐文章于 2023-08-29 21:48:49 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/yamdork93/article/details/71713580

版权

要想开始vue项目，第一步是搭建项目，详情参见

http://www.open-open.com/lib/view/open1476240930270.html

最近重新看下vue，当初学的时候笔记记得乱七八糟，对于一个刚接触MVVM的人来说，网上的文档看的也是云里雾里，很多东西用起来也是生搬硬套，今天看到一篇文章写的特别透彻，对vue有了更深刻透彻的理解，对于新手可以快速掌握更好的理解（http://www.cnblogs.com/rik28/p/6024425.html）。我自己也做了一个小小的总结，俗话说温故而知新，不一定要不断学习生僻的知识，也可以温习已学的知识，并且由其中获得新的领悟。

<!DOCTYPE html><html>

<head>

</head>

<body>

</div>

</body>

// 这是我们的Model

varModalData = {

message: 'Hello World!'

}

// 创建一个 Vue 实例或 "ViewModel"

// 它连接 View 与 Model

new Vue({

el: '#app',

data: ModalData

})

</script></html>

1.el:”#idname”,表示该vue实例挂载到id=’idname’这个元素上。

2.data:’ModalData’表示指向modal，modal是ModalData对象。

3.和MVC模型的区别在于数据时双向绑定的

<p>{{ message }}</p>

</div>

将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。

4.常用指令

①v-if指令

条件渲染，v-if="expression"，expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。为false，不会被渲染。

②v-show指令

条件渲染，与v-if区别是，不管为ture/false,始终被渲染，只是是否显（dispaly）。

③v-else指令

为前两者添加一个else块，必须在v-if和v-show后面，否者不能被识别。（v-if为true时，后面的else块不渲染；v-show为true时，后面的else块渲染，不显示）

④v-for指令

相当于js的遍历，v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

⑤v-bind指令

可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的属性（attribute），例如：v-bind:class=‘classname’

⑥v-on指令

用于给监听DOM事件,<a v-on:click="doSomething">,有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

Ep:

<p>

<button v-on:click="greet">Greet</button>
</p>
<p>

<button v-on:click="say('Hi')">Hi</button>
</p>

<script>
    varvm=newVue({
        el:'#app',
        data:{
            message:'Hello, Vue.js!'
        },
        //在 `methods`对象中定义方法
        methods:{
            greet:function(){
                // //方法内 `this`指向 vm
                alert(this.message)
            },
            say:function(msg){
                alert(msg)
            }
        }
    })
</script>