Vue前端js框架基础入门

一、入门概述

Vue是一套用于构建用户界面的渐进式JavaScript框架

特点：
轻量级：体积小
渐进式：不需要学完全部功能，用到什么学什么
响应式：数据更新之后，视图不需要刷新，会自动更新
学习成本低：基于HTML和js，官方文档都是中文
官方教程文档：https://cn.vuejs.org/v2/guide/

安装引入
Vue有两年环境版本
开发版本：
包含完整的警告和调试模式
本地下载：https://cn.vuejs.org/js/vue.js

生产版本：
删除了警告，33.30KB min+gzip
本地下载：https://cn.vuejs.org/js/vue.min.js

CDN引入：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二、基础语法

1、声明式渲染

示例：

<div id="app">{
  {message}}</div>

<script type="text/javascript">
    var vm =new Vue({
    
        el:"#app",
        data:{
    
            message:"hello Vue!"
        }
    })
</script>

页面显示结果：

hello Vue!

el叫做挂载点，对应的值是html元素的id。一个Vue应用会将其挂载到一个DOM元素上，即这个id对应的元素。挂载点支持css选择器，推荐使用id选择器。挂载点的DOM只支持双标签(和标签除外)，不支持单标签。
data是渲染的时候动态的数据，当这些数据改变时，视图会进行重渲染(不需要手动刷新)，也就是响应式。
在Vue中使用{ {属性名}} (插值)来获取data中的值，如上面代码中的{ {message}}对应的就是data中的message

2、条件渲染

指令：v-if
控制一个元素是否显示，使用指令。在Vue中，元素中V-前缀的特殊属性叫做指令。指令的职责是，当表达式的值改变时，将其产生的连带影响。

<div id="app">
    <p v-if="seen">直接显示的内容</p>
    <p v-else >默认隐藏</p>
</div>

    var vm =new Vue({
   
        el:"#app",
        data:{
   
            seen:true
        }
    })

浏览器显示：

直接显示的内容

指令：v-show
也是控制一个元素是否显示，不过改变的是样式(适合频繁切换的元素)，而v-if改变的是DOM树。

<div id="app">
    <p v-show="seen">直接显示的内容</p>
</div>
<script type="text/javascript">
    var vm =new Vue({
    
        el:"#app",
        data:{
    
            seen:false
        }
    })
</script>

浏览器显示：

当seen为false改变了css样式

<p style="display: none;">直接显示的内容</p>

3、列表渲染

指令：v-for
显示的数据是一个数组

<div id="app">
    <ul>
        <li v-for="todo in todos">{
  {todo.text}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm =new Vue({
    
        el:"#app",
        data:{
    
            todos:[{
    text:"爱学习，爱java"},{
    text: "java是世界上最好的语言"},{
    text: "day day up"}]
        }
    })
</script>

页面效果：

爱学习，爱java
java是世界上最好的语言
day day up

在控制台里，输入vm.todos.push({ text: '新的内容' })，列表最后会添加新内容。
复杂一点的数据

<div id="app">
    <ul>
        <li v-for="goods in goodsList">商品名：{
  {goods.name}}<br>商品价格：{
  {goods.price}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
    
        el: "#app",
        data: {
    
            goodsList: [{
    "id": 1, "name": "苹果", "price": 10},
                {
    "id": 2, "name": "香蕉", "price": 12},
                {
    "id": 3, "name": "梨", "price": 8}]
        }
    })
</script>

浏览器显示：

商品名：苹果
商品价格：10
商品名：香蕉
商品价格：12
商品名：梨
商品价格：8

获取索引可以使用v-for="(goods,index) in goodsList" ，其中index是当前元素的索引,{ {index}}可以获取到当前元素的索引

4、原始html

如果响应式的内容是HTML,就不能使用双大括号，需要使用v-html指令

<div id="app">
    <ul>
        <li>差值表达式支持输出的内容：{
  {rawHtml}}</li>
        <li>指令v-html输出的内容：<span v-html="rawHtml"></span></li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
    
        el: "#app",
        data: {
    
            rawHtml:"<span><a href='#' style='color: red'>文字内容</a></span>"
        }
    })
</script>

浏览器显示：

差值表达式支持输出的内容：<span><a href=’#’ style=‘color: red’>文字内容</a></span>`
指令v-html输出的内容：文字内容

5、表达式

对于所有的数据绑定，Vue 都提供了完全的JavaScript 表达式支持。每个绑定都只能包含单个表达式

<div id="app">
    <ul>
        <li>{
  {!seen?"false":"true"}}</li>
        <li>{
  {num+1}}</li>
        <li>{
  {text+"，你来自哪里"}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
    
        el: "#app",
        data: {
    
            seen:true,
            num:1,
            text:"你是谁"
        }
    })
</script>

浏览器显示：

true
2
你是谁，你来自哪里

6、绑定属性

指令：v-bind
缩写是：:属性名
用于响应式地更新HTML属性

<div id="app">
    <ul>
        <li v-bind:class="id"></li>
        <li :class="id"></li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
    
        el: "#app",
        data: {
    
            id:"top"
        }
    })
</script>

审查元素看元素节点属性：

<ul>
    <li class="top"></li>
    <li class="top"></li>
</ul>

7、绑定样式

可以传给v-bind:class一个对象，以动态地切换class, 也可以传递数组，或者进行一些计算。
使用v-bind:style绑定css样式。

    <style type="text/css">
        .active{
    
            color: red;
        }
        .large-cls{
    
            font-weight: bolder;
        }
    </style>

<div id="app">
    <ul>
        <li v-bind:class="{active:isActive}">文本内容1</li>
        <!--静态和指令共存-->
        <li :class="{active:isActive}" class="large-cls">文本内容2</li>
        <!--绑定数组-->
        <li :class="[activeClass,largeClass]">文本内容3</li>
        <!--绑定对象-->
        <li :class="classObj1">文本内容4</li>
        <!--绑定计算的对象-->
        <li :class="classObj2">文本内容5</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
    
        el: "#app",
        data: {
    
            isActive:false,
            activeClass:"active",
            largeClass:"large-cls",
            classObj1:{
    active:true}
        },
        computed:{
    
            classObj2:function () {
    
                return{
    
                    active:this.isActive,
                    'large-cls':!this.isActive//名字中有特殊符号，如“-”,用单引号
                }
        }
        }
    })
</script>

生成的静态class属性

<ul>
    <li class="">文本内容1</li>
    <li class="large-cls">文本内容2</li>
    <li class="active large-cls">文本内容3</li>
    <li class="active">文本内容4</li>
    <li class="large-cls">文本内容5</li>
</ul>

8、绑定事件

指令：v-on:事件名
简写：@事件名
使用v-on绑定事件

<div id="app">
    <ul>
        <li >num={
  {num}} <