Vue入坑日记: day - 01

前言

最近做了一些小项目，小组里写前端的确实有点拉胯，于是自己动手写前端，因为大一学过web前端基础，所以对HTML，CSS还有印象，就直接对JS下手了，学了两天把JS大致搞明白了，顺便对JQuery和Ajax都学了下，然后对之前的项目稍微改进了一下，自信心爆棚直接上框架Vue

Vue简介

(说真的我觉得这个logo是真好看)

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架；Vue 只关注视图层， 采用自底向上增量开发的设计；的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。简而言之，言而简之就是，Vue只关注视图层，在视图层上只关心数据，不用操作Dom节点就可以更新视图了(开发人员听了流下了感动的泪水)，对后端学前端的程序员来说无疑是天大的福音！！！

Vue入坑

1.初始化Vue

说来简单，使用Vue只需要引入Vue.js

定义一个盒子： <div id="box"></div>

new一个Vue对象：var vm = new Vue({el: "#box"})

就可以在box中尽情的使用Vue了

2.插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

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

html

使用 v-html 指令用于输出 html 代码：

<div v-html="message"></div>

属性

HTML 属性中的值使用 v-bind 指令

<div v-bind:class="{'use?'clas':''}> use为true使用clas样式，

v-bind:class 可简写为 :class

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

{{5+5}},{{handle()}},{{'ok'?'yes':'no'}}

指令

指令是带有 v- 前缀的特殊属性

<p v-if="seen">seen</p> v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

<li v-for="item in items"></li> v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似

<input v-model="message"> v-model指令来实现双向数据绑定，在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

参数

参数在指令后以冒号指明

<a v-bind:href="url">hello world</a> 在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

<div id="center" @click.stop> 这里.stop就是修饰符,阻止冒泡