要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。

1，首先你要先创建一个文件夹，

把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。

2.写导入jar包的代码。

我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的：

<script src="js/vue.js" type="text/javascript"></script>

3。在body里面写代码：

其中首先是el表示你操作什么内容,他的专业名词是挂载。

data是模型数据，他的值是一个对象。

首先new 一个vue的对象，msg是信息,这里表示的是他操作这个名字叫demo的对象，在他的div里面输出这个helloword。这里面是用一个插值表达式，做一个前端渲染。

写完后你可以右键点击这个按钮运行。

1.1Vue的指令。

在vue中所有的指令都是以v开头的，例如 v-cloak，指令的本质就是自定义属性。

在上面的演示代码中用插值表达式会存在一个问题，“闪动”。

1.1.1:v-cloak指令

闪动就牵扯到了，他们的编译方式问题，在代码中他是先运行这个插值表达式，{{msg}}然后在执行，下面的<script></spript>的代码里面的msg渲染。这样的话页面可能会只显示{{msg}}这个，所以为了避免这个问题的发生，我们会用到一个v-cloak这个指令。

他的写法是：   <div v-cloak>{{msg}}</div>写在div里面。

因为你写了这个插值表达式，因为插值表达式是先执行后渲染值，而v-cloak这个指令是直接把值给你渲染了，所以比较方便。

1.1.2:v-text指令

更新元素的内容，如果要更新部分元素的内容则要用到{{Mustache}}插值。

他的写法是:<span>{{msg}}</span>

他的这个跟插值两个都差不多，但是写法不一样。

1.1.3：v-html指令

这个指令，就是你直接写在msg写html标签，然后在div里面写上一个v-html标签就能给他显示出来，他能直接识别出来这个标签，注意，这个标签在网站上动态渲染任意html是非常危险的，容易导致xss攻击，只在可信内容上使用，永远不能用在用户提交的内容上。也就是说这个用于内部和网站提交数据，第三方的话就不要用了，因为不安全。

这个具体的代码如下:

1.1.4 v-pre标签，这个与v-html相反。他能跳过元素的编译过程

具体的用法就是在div里面写上v-pre，然后在在里面写这个上面的msg1，然后运行就能看见效果了。

1.1.5 数据响应式

怎么理解这个响应式，

1，html5中的响应式(屏幕尺寸的变化导致样式的变化)。

2，数据的响应式(数据的变话导致页面内容的变化)。

什么是数据绑定

1数据绑定:将数据填充到标签中

v-once只编译一次

1，显示内容之后不在具有响应式的功能。

具体的用法:

是给vue赋值一个对象，然后在浏览器打开f12。在里面进行赋值操作

具体代码：

 他的页面f12赋值效果:在这个控制台写vm.msg=然后跟你想要的数字。

 这个就叫数据响应式，数据的变化导致页面内容的变化。

1.1.6双向数据绑定 ：v-model（这个是这个vue的mvvm这个框架的核心）：

这个传输其实算是页面的数据在传输,

你使用f12的vm.msg也能改变，也能传值，这个传值叫，数据向页面在传输。

这就叫数据的双向绑定

 什么是MVVM设计思想?

1,M(model)

2,V(view),

3,(View-Model)

视图到数据到模型

模型把数据发到视图

他们是双向的数据绑定。

1.1.7事件的绑定，第一种是v-on:click，第二种是@click

也可以成为点击事件，

这个写有两种方式，第一种是，v-on:click，第二种是@click

你可以定义一个值为0的对象，通过单击按钮让他是先自增，也可以通过给他一个传一个参数，通过handle()来传对象，如果要用handle这个方法的话，你要写一个methods:的方法。这个this就代表这个vue，传参数的话，括号()里面的p是固定的，p1，最后一个一定是event，传对象，最后一定是event来传对象。

其中console.log是代表在控制台输出这个值。

例子:

1.1.8事件的绑定

这两个统称为事件修饰符

冒泡。

一个div写一个点击事件，在里面写一个按钮，也给按钮加一个点击事件。在在下面写方法名。例子:

 你就会发现这个明明是handle2的方法，但是却也+1了，这就是冒泡。

那么怎么防止这个冒泡呢?我们就需要写一个指令那就是“stop”，这个指令在@click后面写。

 这样写的话，就会发现不会+1了。

这个也可以理解为，让他只执行当前本身，不会执行与他相关联的。

.stop阻止冒泡

默认行为:

你写一个超链接，<a href="http://www.baidu.com">百度</a>

会跳转到百度网页，那要取消他的默认事件是什么呢？就是.prevent。

在后面加上这个就不会跳转了。

例子:

 .prevent取消默认事件。

按键修饰符:

一个是按回车后触发，

你写一个文本框，写一个双向数据绑定，再给这个huiche一个参数，再写一个v-on：keyup(键盘弹起触发).enter(回车键)="触发的事件"，

例子:

 

另一个是按退格键触发：

也是写一个input文本框，然后写一个和双向数据绑定，也写一个v-on:keyup.delete(退格键)="触发的事件"。

例子:

 

自定义按键修饰符:

全局config.keyCodes对象。

设置自定义按键修饰符，你要先写一个全局的自定义按键

Vue.config.keyCodes.a(这里随便你写，这里我写成了a)=65(因为a对应的数字也是65，要想写什么按键就要写按键对应的什么数字)。

然后你再写一个input文本框，双向数据绑定，然后是按什么触发，v-on:keyup.a(因为是上面定义的a这里必须要和上面一样)="你要执行的方法"。

这里面是让他在控制台显示这个65，如果你要让他显示字母a。

console.log(event.target.value)这样写。

1.19属性的绑定:v-bind

用v-bind来写超链接:记住不能直接在里面写页面。

<a v-bind:href="http://www.baidu.com"></a>这种写法在这里是错误的，这样写页面时一片空白。

我们要给他的一给对象

<a v-bind:href="baidu">百度</a>

他的简写方式

<a :hret="baidu">百度</a>

 

 用v-bind和v-on:input来实现双向数据绑定v-model  

<input type="text" v-bind:value="info" v-on:input="handle6"/>

首先给这个info一个值，然后再让他调用这个handle6这个方法。在输入框里面给这个info重新赋值，让他在显示到桌面上。

 

 

因为设计到传参，所以要用到event。

1.20样式的绑定：

1，用对象来绑定样式:这个针对的是class样式。

首先还是导入vue的依赖。

  <script src="js/vue.js" type="text/javascript"></script>

然后写一个绑定样式

 然后再写一个style

注意，这里面的active和error都是上面对象里面的两个一定要一样。

然后再写vue的方法

(写这个按钮的方法是，点击这个按钮后会把这个div隐藏，再点一下会显示)

用数组来绑定样式:

他通过vue绑定的样式的方法是:

通过这个来绑定样式

 

 然后在单击另一个按钮走这个方法。

2.用style样式

他开<div v-bind:style="{这里面写样式}"></div>。

例子:

他还有一种简写的方式:

 

 当然这个家伙也有数组的样式

 

 1.3分支结构

v-if 

v-if-else-if

v-else

他们三个其实跟之前用的if没什么区别，渲染方式是，他们只要有一个符合，就不会走其他的

v-show

他的是先把其他的隐藏了，符合了再走

 

1.4循环数组：

在数据里面写一个数组:

在<ul><li v-for="item in fruit"></li></ul>里面写循环，把他循环出来 这个fruit写进去.

例子:

另一种是以数组的形式给值，也是用上面的给他循环出来，因为数组的话，必须要有一个固定的值，所以给他一个id。

 最后一种方式是对象:

\

对象的循环遍历的取值是(key,value,index（下标）) 然后用插值表达式给他表示出来。