Vue基础使用

最新推荐文章于 2024-06-17 20:38:01 发布

泊一

最新推荐文章于 2024-06-17 20:38:01 发布

阅读量303

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/w_D_lufei/article/details/103135557

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

1.Vue概述
- Vue：渐进式JavaScript框架
2. Vue基本使用
3. Vue模板语法
案例：tab栏切换

1.Vue概述

Vue：渐进式JavaScript框架

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟 DOM

2. Vue基本使用

2.1 传统开发模式对比

原生JS

<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World';
var div = document.getElementById('msg');
div.innerHTML = msg;
</script>

Jquery

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript">
var msg = 'Hello World';
$('#msg').html(msg);
</script>

2.2 Vue.js之HelloWorld基本步骤

// 1.提供填充数据的标签
<div id="app">
//4.绑定数据
<div>{{msg}}</div>
</div>
// 2.引入Vue.js库
<script type="text/javascript" src="js/vue.js"></script> 
//3 实例化Vue实例，绑定Dom元素、提供数据
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'HelloWorld' }
})
</script>

2.3 Vue.js之HelloWorld细节分析

1. 实例参数分析

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

2. 插值表达式用法（{{}} 这种形式）

将数据填充到HTML标签中
插值表达式支持基本的计算操作

3. Vue代码运行原理分析

概述编译过程的概念（Vue语法→原生语法）

3. Vue模板语法

3.1 模板语法概述

1.前端渲染方式

原生js拼接字符串

	var d = data.weather;
	var info = document.getElementById('info');
	info.innerHTML = '';
	for(var i=0;i<d.length;i++){
		var date = d[i].date;
		var day = d[i].info.day;
		var night = d[i].info.night;
		var tag = '';
		tag += '<span>日期：'+date+'</sapn><ul>';
		tag += '<li>白天天气：'+day[1]+'</li>'
		tag += '<li>白天温度：'+day[2]+'</li>'
		tag += '<li>白天风向：'+day[3]+'</li>'
		tag += '<li>白天风速：'+day[4]+'</li>'
		tag += '</ul>';
		var div = document.createElement('div');
		div.innerHTML = tag;
		info.appendChild(div);
}

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

使用前端模板引擎

<script id="temp" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>{{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>

优点:大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
缺点：没有专门提供事件机制。

利用es6 `` 反引号拼接字符串
使用vue特有的模板语法

2.模板语法概览

插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

3.2 指令

1.什么是指令

概念：以v-开头的自定义属性
指令的格式：以v-开始（比如：v-cloak）

2. v-cloak指令用法——解决"闪动"

插值表达式存在的问题：vue加载之前，插值表达式未被识别，加载完成后才会被替换，“闪动”——会先出来{{msg}},然后才是渲染的值
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值

 <style type="text/css">
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
 */
  [v-cloak]{
    /* 元素隐藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
		 也就是对应的标签会变为可见
    -->
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存储的是数据
      data: {
        msg: 'Hello World'
      }
    });
</script>
</body>
</html>

3. 数据绑定指令

v-text—— 填充纯文本

相比插值表达式更加简洁,同时没有闪动问题
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-html ——填充HTML片段

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题（xss攻击）, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    
    <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
    
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

v-pre ——填充原始信息

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

 <span v-pre>{{ this will not be compiled }}</span>    
	<!--  显示的是{{ this will not be compiled }}  -->
	<span v-pre>{{msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

4. 数据响应式

如何理解响应式

html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）

什么是数据绑定

数据绑定：将数据填充到标签中

v-once——执行一次性的插值

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

 <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
     <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
</script>

3.3 双向数据绑定指令

双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
一般用在表单上
双向数据绑定通过v-model来实现

v—model——数据绑定

 <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      });
    </script>
  </body>

MVVM

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
m model
- 数据层 Vue 中数据层都放在 data 里面
v view 视图
- Vue 中 view 即我们的HTML页面
vm （view-model）控制器将数据和视图层建立联系
- vm 即 Vue 的实例就是 vm

3.4 v-on——事件绑定

1. Vue如何处理事件？

v-on指令用法
<input type=‘button' v-on:click='num++'/>
v-on简写形式
<input type=‘button' @click='num++'/>

2. 事件函数的调用方式

直接绑定函数名称
<button v-on:click='say'>Hello</button>
调用函数
<button v-on:click='say()'>Say hi</button>

3. 事件函数参数传递

普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
           <!-- 所以不传参时 handle1 与 handle1() 效果是一样的 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须(行业规范的意思，我试了可以放在后面)作为最后一个参数显示传递，并且事件对象的名称必须是$event 
            -->
            <!-- 参数位置可以换  但一般习惯把事件放到最后 -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                    // 点击1
                },
                handle2: function(p1, p2, event) {
                    console.log(p1, p2)
                    // 123 456
                    console.log(event.target.innerHTML)
                    // 点击2
                    this.num++;
                }
            }
        });
    </script>
</body>

4. 事件修饰符

stop 阻止冒泡
<a v-on:click.stop="handle">跳转</a>
prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<body>
  <div id="app">
    <div>{{num}}</div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handle0: function(){
          this.num++;
        },
        handle1: function(event){
          // 阻止冒泡
          event.stopPropagation();
        },
        handle2: function(event){
          // 阻止默认行为
          event.preventDefault();
        }
      }
    });
  </script>
</body>

5. 按键修饰符

enter 回车键
<input v-on:keyup.enter='submit'>
esc 退出键
<input v-on:keyup.delete='handle'>

<!--这里keyCode是不区分大小的,是按照键盘的，所以就是以大写字符的ascii 码来识别-->
<!-- 只有在 `keyCode` 是 65 时（就是A键）调用 `vm.submit()` -->
<input v-on:keyup.65="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

<body>
  <div id="app">
    <form action="">
      <div>
        用户名：
        <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
      </div>
      <div>
        密码：
          <input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-按键修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        pwd: ''
      },
      methods: {
        clearContent:function(){
          // 按delete键的时候，清空用户名
          this.uname = '';
        },
        handleSubmit: function(){
          // 按enter键 ，提交表单数据
          console.log(this.uname,this.pwd)
        },
      
      }
    });
  </script>
</body>

6.自定义按键修饰符别名

全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112

本质上只是换了一个名字来表示，触发还是靠对应的键

<body>
  <div id="app">
    <input type="text" v-on:keyup.aaa='handle' v-model='info'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
      el: '#app',
      data: {
        info: ''
      },
      methods: {
        handle: function(event){
          console.log(event.keyCode)
        }
      }
    });
  </script>
</body>

3.5 属性绑定

1. Vue动态处理属性

v-bind指令用法用来响应地更新 HTML 属性
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>

2. v-model的低层实现原理分析

通过属性绑定与事件绑定共同实现
<input v-bind:value="msg" v-on:input="msg=$event.target.value">

<input type="text" :value="msg" @input="handle">
handle: function(event){
	// 使用输入域中的最新的数据覆盖原来的数据
	this.msg = event.target.value;
}

3.6 样式绑定

1. class样式处理

对象语法 ——类名用boolean值来判断
<div v-bind:class="{ active: isActive }"></div>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div :class="bool?'error':' '">三目运算符</div>
    <div v-bind:class="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        bool:true,
        isActive: true,
        isError: true
      },
      methods: {
        handle: function(){
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>

数组语法 ——判断属性名有无
<div v-bind:class="[activeClass, errorClass]"></div>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass]'>测试样式</div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error'
      },
      methods: {
        handle: function(){
          this.activeClass = '';
          this.errorClass = '';
        }
      }
    });
  </script>
</body>

2. style样式处理

对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

<body>
  <div id="app">
    <div :style="{fontSize:bool?'10px':'20px'}">三目运算符</div>
    <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来)    -->
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div divv-bind:style='objStyles'></div>
    <!--数组语法可以将多个样式对象应用到同一个元素 -->
    <!-- 后面的会把前面的覆盖 -->
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        bool:true,
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>

3. 绑定对象和绑定数组的区别

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据 ——用布尔值来判断
绑定数组的时候数组里面存的是data 中的数据 ——用代替数据的变量名

样式绑定3个细节用法

1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？默认的class会保留

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
    .test {
      color: blue;
    }

    .base {
      font-size: 28px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
    <div v-bind:class='arrClasses'></div>
    <div v-bind:class='objClasses'></div>
    <div class="base" v-bind:class='objClasses'>dd</div>

    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error',
        isTest: true,
        arrClasses: ['active', 'error'],
        objClasses: {
          active: true,
          error: true
        }
      },
      methods: {
        handle: function () {
          // this.isTest = false;
          this.objClasses.error = false;
        }
      }
    });
  </script>
</body>

3.7 分支循环结构

1. 分支结构

v-if
v-else
v-else-if
v-show

2. v-if与v-show的区别

v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）
v-show的原理：通过display属性来控制元素是否显示

<body>
  <div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构
    v-if  是先设置好dom结构再渲染到页面，切换的时候dom结构也会被删除
    性能消耗大

      v-show的原理：控制元素样式是否显示 display:none
      // 要是频繁变化就用show   这个已经渲染到页面，不过被隐藏了
    */
    var vm = new Vue({
      el: '#app',
      data: {
        score: 100,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>

3. 循环结构

v-for遍历数组
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
//key表示为每一项循环加一个唯一的标识，方便vue识别，提高性能
<li :key='item.id' v-for='(item, index) in myFruits'>
	<span>{{item.ename}}</span>：<span>{{item.cname}}</span>
</li>

v-for遍历对象
<div v-for='(value, key, index) in object'></div>
v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>

// v：属性值，k：属性名，i：索引
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

案例：tab栏切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    
    .tab ul {
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .tab ul li {
      box-sizing: border-box;
      padding: 0;
      float: left;
      width: 100px;
      height: 45px;
      line-height: 45px;
      list-style: none;
      text-align: center;
      border-top: 1px solid blue;
      border-right: 1px solid blue;
      cursor:pointer;
    }
    .tab ul li:first-child {
      border-left: 1px solid blue;
    }
    .tab ul li.active {
      background-color: orange;
    }
    .tab div {
      width: 500px;
      height: 300px;
      display: none;
      text-align: center;
      font-size: 30px;
      line-height: 300px;
      border: 1px solid blue;
      border-top: 0px;
    }
    .tab div.current {
      display: block;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="tab">
      <ul>
        <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
      </ul>
      <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
        <img :src="item.path">
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        currentIndex: 0, // 选项卡当前的索引
        list: [{
          id: 1,
          title: 'apple',
          path: 'img/apple.png'
        },{
          id: 2,
          title: 'orange',
          path: 'img/orange.png'
        },{
          id: 3,
          title: 'lemon',
          path: 'img/lemon.png'
        }]
      },
      methods: {
        change: function(index){
          // 在这里实现选项卡切换操作：本质就是操作类名
          // 如何操作类名？就是通过currentIndex
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>
</html>

泊一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础使用

文章目录1.Vue概述Vue：渐进式JavaScript框架2. Vue基本使用2.1 传统开发模式对比2.2 Vue.js之HelloWorld基本步骤1.Vue概述Vue：渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建官网：https://cn.vuejs.org/v2/guide/易用：熟悉HTML、CSS、JavaScript知识后，可...
复制链接

扫一扫