vue简单知识技术的分享

一、Vue简介

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件  。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时  ，Vue.js 也能完美地驱动复杂的单页应用。

二、Vue特点

易用，灵活，性能

三、目录结构

 

四Vue安装

1. script直接引入
2. CDN方法：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3. NPM命令行 npm i -g @vue/cli

• 基本模板语法

1. 插值语法：

1.文本 { {}}

2.纯HTML v-html，注意:防止XSS,CSRF{1.前端过滤2.后台转义3.给cookie加http}

3.表达式

1. 指令：

1. v-blnd 动态绑定属性
2. v-if 动态创建和删除
3. v-show 动态隐藏和显示
4. v-on：click 绑定事件
5. v-for 循环遍历
6. v-model 双向绑定

2.1指令缩写：

v-blind：src=>:src

v-on:click=>@click

   代码示例：

 

1.  class 与 style

1. 绑定HTML Class  

  -对象语法     -数组语法

 

1. 绑定内联样式  

   -对象语法     -数组语法     //需要将 font-size =>fontSize

 

1.  条件渲染   

(1)v-if

  (2)v-else v-else-if  

(3)template v-if ,包装元素template 不会被创建  

(4)v-show