【干货】前端开发之VUE介绍与使用

一、Vue介绍

1、什么是Vue

可以独立完成前后端分离式web项目的JavaScript框架

2、学习Vue的原因

三大主流框架之一:Angular React Vue
先进的前端设计模式:MVVM
可以完全脱离服务器端,以前端培训代码复用的方式渲染整个页面:组件化开发

3、Vue的特点

单页面web应用
数据驱动
数据的双向绑定
虚拟DOM

二、Vue使用一

2.1 第一个Vue页面与事件

{{ msg }}

这是一条内容

这是一条内容


2.2 Vue操作样式与文本操作

点击变换文字颜色1

点击变换文字颜色2

{{ msg1 }}

{{ msg1 }}

2.3 Vue事件指令

{{ msg[0] }}

{{ msg[1] }}

  • 第一个li
  • 第二个li
  • 第三个li
function1
function2

2.4 属性指令



1

2

3

4

这是测试style属性

这也是测试style属性


    

男: 女:

男: 女: 哇塞:

new Vue里面的data下:
val: '',
r_val: 'female',
c_val: ['m','mf'],

你可能感兴趣的:(前端vue.js)