关于Vue的一些小笔记（一）创建、指令

一、什么是Vue？

Vue.js是一套构建用户界面的渐进式框架。其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组。简单来说，就是框架。

二、Vue的那些目录结构

这里以npm安装为例，结构如下：

目录解释

目录	说明
build	项目构建相关代码
config	配置目录，包括端口号等
node_modules	npm加载的项目依赖模块
src	要开发的目录，要做的事情基本上都在里面。里面包含几个目录及文件：（1）assets：放置一些图片；（2）components：目录里面放了一个组件文件，可以不用。（3）App.vue:项目入口文件；（4）项目核心文件。
static	静态资源目录，如图片、字体等
test	初始测试目录，可删除
.XXX文件	一些配置文件
index.html	首页入口文件
package.json	项目配置文件
README.md	项目的说明文档

三、Vue的语法格式

1、语法格式如下：

var vm = new Vue({
	//选项
})

2、Vue构造器中的元素

el参数

它是DOM元素中的id，以后做的改动都在这个指定的id的标签里面，外部不会受影响。

<div id="hhh"> div>

var vm = new Vue({
    el:"#hhh"//指定了要改动的id
})

data

用于定义属性（数据对象)

data:{
    site:"我爱学习"，
    url:"www.baidu.com",
    alexa:"10000"
}

注：当一个vue实例被创建时，如果修改data里面这些属性的值，那显示在html中的值也会发生相应的变化。

methods

用于定义的函数，可以通过return来返回函数值。

methods :{
    details:function(){
        return hhhh;
    }
}

{{}}

用于输出对象属性和函数返回值（插值）

<div id="hhh">
    <h1>{{site}}h1> //我爱学习
	<h1>{{url}}h1> //www.baidu.com
    <h1>{{details()}}h1>//hhhh
div>

$符

以便与用户定义的属性区分开来。相当于把用户定义的东西加个标记，和系统定义的区分开。

四、Vue的模板语法

1、什么是指令

指令是带有v-前缀的特殊属性。指令用于在表达式的值改变是，将某些行为应用到DOM上

2、一些指令的举例

（1）v-text指令

设置标签的文本值。有两种方法

• 一种是在标签内部设置
  (此时在内容输入地输入内容不会显示）
• 一种是在标签输入内容的地方加上{{}}。
  （此时在内容输入地输入内容可以显示）

如下所示：

<div id="app">
	<h2 v-text="message">学习</h2>
	<h2 v-text="info+'!'">学习</h2>
	<h2>{{message+"!"}}学习</h2>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"我爱学习",
			info:"好好学习，天天向上"
		}
	})
</script>

运行结果是：

我爱学习
好好学习，天天向上!
我爱学习!学习

（2）v-html指令

用于输出HTML代码，可以用来渲染HTML标签。

<div v-html="message">div>
//message:"<h1>我爱学习h1>"

则这个例子会输出h1大小的“我爱学习”。

（3）v-bind指令

设置元素的属性（比如:src,title,class）

div>

当use的值为true时，使用class1的样式。

缩写为：

a>

（4）v-if指令

根据表达式值的真假，切换元素的显示和隐藏（操纵dom元素），即隐藏时标签也没有了。
除此之外，还有v-else指令、v-else-if，两者必须跟在v-if或者v-else-if之后。

<p v-if="seen">我爱学习p>

v-if指令将根据表达式seen的值（true或false）来决定是否插入p标签。

（5）v-on指令

用于监听DOM事件,这里参数是监听的事件名。按钮事件可以使用这个指令，并对用户的输入进行响应。

a>

缩写为：

<a @click="dosomething">a>

（6）v-model指令

用来在input、select、textarea、CheckBox、radio等表单控件元素上创建***双向数据绑定***，根据表单上的值，自动更新绑定的元素的值。

<div id="app">
    <p>{{message}}p>
    <input v-model="message">
div>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"我爱学习！"
        }
    })
script>

运行结果为:

双向数据绑定即当在input框中输入或删除文字时，上面的p标签里也完成相应的动作。反之亦然。

（7）v-show指令

• 作用是：根据真假切换元素的显示状态
• 原理是修改元素的display（样式），来实现隐藏
• 指令后面的内容，最终都会解析为布尔值
• 值为true元素显示，值为false元素隐藏
• 真假（数据）改变后，对应元素的显示状态会同步更新。

3、表达式

vue.js提供了完全的js表达式支持，即可以在vue中使用表达式。

4、参数

参数在指令的后面以冒号指明。例如：

<pre>我爱学习a>pre>
//url:www.baidu.com

即当用户点击“我爱学习”时，跳转到百度页面。

这里的href是参数，告诉v-bind指令将该元素的href属性与表达式URL的值绑定。

5、修饰符

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

form>

上面这个例子，用.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()

6、过滤器

Vue.js允许自定义过滤器，被用作一些常见的文本格式化。由“管道符”（|）指示。

{{message | capitalize}} 

<div v-bind : id="rawid | formatid">div>

过滤器函数接受表达式的值作为第一个参数。即在上面实例中，message和rawid为第一个参数。

过滤器也可以是这样的

{{message | filterA | filterB}}

{{message | filterA("arg1",arg2)}}