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 模板语法

插值语法

我的名字是:{{name}}

我的年龄是：{{age}}

我的爱好是：{{hobby}}

显示对象：{{obj}}

{{url}}

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

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

文本指令

就想显示成标签

{{url}}

指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了

v-html：把字符串，渲染成标签

v-text：把变量内容，渲染到标签中

{{hello}}

v-show:一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了

我是一个div

我的div

我的div

我的div

v-if:真正的删除，效率低

我是第二个个div

我是第二个个div

我是第二个个div

我是第二个个div

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

事件指令

v-on表示事件指令，click表示单击,老语法，不用了

按钮

新语法，以后都用这种： @click='函数名'

<button @click="handleClick2">按钮二