1-vue介绍

Vue介绍

vue是js框架 （jq）

渐进式框架:前端项目可以只有一部分使用vue，完全使用vue，作为一个vue项目

版本：

2.x 常用
3.x 最新的

M-V-VM思想

-Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式
-双向数据绑定

架构：MVC MTV MVP

组件化开发、单页面开发

-单页面开发：vue工程，整个项目，其实就只有一个index.html页面
-组件化开发：  xx.vue 

开发前端使用的ide

-vscode：go，python...  免费，微软出的
-jetbrains系列：收费，Pycharm，goland，phpstorm，idea，webstorm
	-androidstadio：谷歌买了jetbrains版权，自己定制的ide
-其他
	-sublinetext
    -hbuilder
    -eclipse
    -myeclipse
    -vim  yyds  插件 美化

-开发前端使用pycharm，装vue插件

3 Vue快速使用

我的名字是：{{name}}，我的年龄是：{{age}}

4 模板语法

插值语法

<h1>我的名字是:{{name}}</h1>
<h2>我的年龄是：{{age}}</h2>
<h3>我的爱好是：{{hobby}}</h3>
<h4>显示对象：{{obj}}</h4>

<p>{{url}}</p> 默认情况，原封不动显示，如果能直接渲染成标签，说明存在漏洞 xss攻击

5 文本指令 v-html:把标签字符串显示成标签 v-text：等同于插值 v-show：显示不显示，不是真正删除 v-if：显示不显示，是真正的删除

文本指令

<h3>就想显示成标签</h3>
<p>{{url}} </p>
指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了

<br>
v-html：把字符串，渲染成标签
<div v-html="url"></div>
<br>
v-text：把变量内容，渲染到标签中
<p><span>{{hello}}</span></p>
<p><span v-text="hello"></span></p>
<br>
v-show:一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了
<div v-show="b">
    我是一个div
    <p>我的div</p>
    <p>我的div</p>
    <p>我的div</p>
</div>
<br>
v-if:真正的删除，效率低
 <div v-if="b1">
    我是第二个个div
    <p>我是第二个个div</p>
    <p>我是第二个个div</p>
    <p>我是第二个个div</p>
</div>

6 事件指令 v-on:clicl='' @click=''

事件指令

v-on表示事件指令，click表示单击,老语法，不用了
<p><button v-on:click="handleClick">按钮</button></p>
<br>
新语法，以后都用这种： @click='函数名'
<p><button @click="handleClick2">按钮二</button></p>