# vue_study

**Repository Path**: blogwang/vue_study

## Basic Information

- **Project Name**: vue_study
- **Description**: vuevuevuevue
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-19
- **Last Updated**: 2022-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue

vue的语法 

vue组件  

路由 

Vuex 

javascript  (  node.js  也可以运行在服务器端 )

> chrome   v8引擎 
>
> node.js 是，基于Google的V8引擎（V8引擎执行Javascript的速度非常快，性能非常好。），是一个javascript的运行平台 
>
> (脱离于浏览器的js开发和运行环境  )   与jdk类似  

dom  document object modal  文档对象模型 

> var obj=document.getElementById("")  获取一个html元素 
>
> obj.属性名  获取元素对应属性的值 
>
> obj.属性名=值   给元素指定属性设置新的值 

jQuery   (js的一个类库 )

前端框架：  React  Angular   轻量级框架  (vue)

## Vue是什么？

* 构建用户界面

  > @RestController  返回就是json或xml  
  >
  > 只关注视图层

* 渐进式框架

* 响应式的  （数据对象中的属性值变化，页面同步更新）

* 组件应用 

  > 代码的复用 

   MVC:  

> m  modal 业务层 
>
> c  controller控制层
>
> v  view 视图层   （jsp freemarker  ）

## Vue示例

   Vue  构造函数  

  js对象： 是一组无序的属性集合 

> name:value的形式出现  ，多个值之间用逗号隔开 
>
> name:属性名  通常是字符串类型 的 
>
> value：属性值   ，类型可以是字符串   数字   布尔 对象  数组   函数 
>
> js是一种弱类型的语言 ，变量的类型由值来决定 

在vue开发中，通常会设置一个根元素，做为vue实例挂载

## 选项

* el    css选择器 

  > id选择器  元素选择器 类选择器.... 

js中 window.name  全局属性 

* data  

  > 数据对象，用来定义在页面中与dom绑定的数据属性（类似变量）
  >
  > 类型：
  >
  > * 是一个Object 对象   
  > * 函数 在组件中（后面讲）

## 模板语法 

### 文本插值 

   使用“Mustache”语法 (双大括号) ，在页面中绑定Vue实例的数据对象中的属性

### html插值 

指令：   v-html="数据属性"    渲染html元素 

### 属性插值

指令：   v-bind:html属性名="数据属性"

### js表达式

  {{  表达式  }}

### 事件指令

  v-on:事件名称="表达式 |  方法"

> 函数定义方法：
>
> 1. 声明式函数 
>
>    语法：  function 函数名(参数...)   {  } 
>
> 2. 表达式函数 
>
>    语法：   var  f= function(参数...){}    (函数常量 |函数直接量)

Vue会将配置属性，转换为对象的实例属性（成员变量），默认实例属性名

是  $配置属性名

Vue实例代理了实例属性vm.$data  vm.$props

this :指向vue实例本身 

### 缩写

  属性插值：  

* v-bind:属性名="数据属性"
* :属性名="数据属性"

![image-20220419112907828](assets/image-20220419112907828.png)

![image-20220419113012735](assets/image-20220419113012735.png)

事件指令： 

* v-on:事件名="表达式|方法"
* @事件名="表达式|方法"

## 计算属性

​     块元素：  独占一行的元素  div   p   

​     行内元素：  显示在一行中  span  img   input