Vue学习（一）

最新推荐文章于 2024-05-29 17:10:32 发布

FlySupper

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量102

点赞数 1

本文链接：https://blog.csdn.net/qq_41220455/article/details/95476691

版权

Vue.js是当下很火的javascript MVVM库，是以数据驱动和组件化的思想构建的，

他通过特殊的HTML语法，将DOM和数据绑定起来；一旦创建了帮顶，DOM将和数据保持同步，每当改变了数据，DOM也会及时更新；

（1）MVVM模式：Model-view-ViewModel

ViewModal是Vue.js的核心，是一个Vue实例； Vue实例是作用于某个HTML元素上；

Vue使用步骤：

1.定义view 2.定义model 3. 创建一个Vue实例或者ViewModel，用于连接 view和Model；

Hello World实例：

<body>
//this is view
  <div id="content">
    {{message}}
  </div>
</body>
<script src="vue.js"></script>
<script>
//this is model
   var printData={
    message="hello world!" 
   }

//创建一个Vue实例或“ViewModel”
new Vue ({
   el:"#content",
   data: printData
 })
</script>

创建Vue实例时，需要传入一个选项对象，该选项对象可以包含数据，挂载元素，方法，等等；

在上面的例子中，选项对象的el属性指向view, el:"#content"表示将该vue实例挂载到id所在的元素，data 属性指向model;

双向绑定：MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定；

<div id="content">
   {{massage}}

    <input type="text" v-model="message">
</div>

（2）Vue.js常用指令: Vue.js的指令是以v-开头，作用于html元素，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将指令看做特殊的HTML特性；

常用的内置命令：

1)、v-if: 是条件渲染指令，根据表达式的值来执行元素的插入或者删除行为；如果表达式的值为false，则元素包含的内容不会显示

2)、v-show:也是条件渲染指令，但是他改变的只是元素的style属性值，而不是对html元素进行操作，当条件为false的时候，样式是style:"display=none" ；如果是v-if 的条件为false，那这个元素就不会存在；

3）、v-else: 该指令为v-if 或者 v-show添加一个else块； v-else所在元素必须在v-if 或者v-show元素之后，否则他不会被识别；

4）、v-for指令：该指令是基于一个数组渲染一个列表，和js中的遍历语法相似；v-for="item in items"

5）、v-bind指令：该指令可以在其名称后面带一个参数，中间用冒号隔开，这个参数通常是HTML元素的特性，例如

v-bind:calss=""; 语法： v-bind:属性名=“表达式”

6）、v-on指令：用于监听DOM事件，用法和v-bind类似；例如： v-on:click="方法名"

缩写： v-bind 可以缩写为一个冒号： v-bind:class="" 相当于 :class=""

v-on可以缩写为@ ：v-on:click="" 相当于： @click=""

FlySupper

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（一）

Vue.js是当下很火的javascript MVVM库，是以数据驱动和组件化的思想构建的，他通过特殊的HTML语法，将DOM和数据绑定起来；一旦创建了帮顶，DOM将和数据保持同步，每当改变了数据，DOM也会及时更新；（1）MVVM模式：Model-view-ViewModelViewModal是Vue.js的核心，是一个Vue实例； Vue实例是作用于某个HTML元素上；Vue...
复制链接

扫一扫