vue2入门 - 技术栈

1、安装

新建"vue"文件夹------>新建vue1.html

直接用<script>标签引入vue：

javascript 复制代码

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

tips:

CDN:一个网络加速的技术

完整代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</body>
</html>

此时就已经引入成功了

2、vue的变量渲染

使用双括号(胡子)语法，就实现了文本渲染。

我们在绑值语法里可以写字符串、数字、布尔、表达式。

字符串、数字、布尔示例：

html 复制代码

</head>
<body>
<div id="app">
  {{message}}
  <div>
    {{num++}}
<!-- `{{num++}}` 表示使用 `num` 的当前值，然后再将 `num` 值加一；
而 `{{++num}}` 表示先将 `num` 的值加一，然后再使用新的值。 -->
  </div>
  <div>
    {{bool}}
  </div>
  <div>{{bool?'a':'b'}}</div>
<!--如果bool为true显示a，false显示b-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
  var app = new Vue({
    el:'#app',
    data:{
      message:'hello',
      num:1,
      bool:true
    }
  })


</script>

</body>

显示结果：

数组示例：

1、查询数组里名叫张三的人的年龄

html 复制代码

<body>
<div id="app">
<div> {{arr.find(v =>v.name ==='张三')?.age}}</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
   arr:[{name:'张三',age:20}]
    }
  })


</script>

</body>

//如果把data中arr的数组里的元素清空，div里面那个语句也不会报错。此时整个值就会变成undefined。

v-html（模版）

有时候我们想渲染一个html

html 复制代码

<body>
<div id="app">
<div v-html="htmlStr"></div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
   htmlStr:'<stong style="color:red">vue学习</stong>'
    }
  })


</script>

</body>

v-model(双向绑定值)

html 复制代码

<div id="app">
<div>
  <input type="text" v-model="count">
  <div>{{count}}</div>

</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
count:0
    }
  })


</script>

效果：

v-if（判断）

html 复制代码

<body>
<div id="app">
<div>
<div v-if="color === '红色'">红色</div>
  <div v-if="color === '蓝色'">蓝色</div>
 <div v-else-if="color === '黑色'>黑色</div> 
<!--这也是判断的语句之一-->
 <div v-else>黑色</div>
</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
 color:'红色'
    }
  })


</script>

</body>

结果显示红色

v-bind:动态绑定属性

html 复制代码

<body>
<div id="app">
<div>
<a v-bind:href="url">搜索一下</a>
</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
   url:'https://www.baidu.com'
    }
  })

</script>

</body>

v-bind简写是<a :href="url">搜索一下</a>

v-on:事件绑定

html 复制代码

<body>
<div id="app">
<div style="width:100px;height:100px;background-color: red" v-on:click="clickDiv" id="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
  var app = new Vue({
    el:'#app',
    data:{

    },
    methods:{
      clickDiv(){
        console.log('我点击了div')
        
      }
    }
  })


</script>

</body>

如果你想点击方块让它切换颜色或者更多类似的操作

那么在methods方法里可以这样写：

javascript 复制代码

    methods:{
      clickDiv(){
        console.log('我点击了div')
     //首先获取元素,这样的写法就是js原生的语法
        let color=document.getElementById('div').style.backgroundColor
        document.getElementById('div').style.backgroundColor=color ==='blue'?'red':'blue'
      }
    }

例2:

如果你想点击数字就改变颜色的话，你需要再添加一个点击事件。

html 复制代码

<div id="app">
  <div v-html="htmlStr" v-on:click="clickHtml"></div>
  <div style="width:100px;height:100px;background-color: red" v-on:click="clickDiv" id="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      htmlStr: '<strong id="htmlId" style="color:red">222</strong>'
    },
    methods: {
      clickHtml(event) {
        if (event.target.id === 'htmlId') {
          event.target.style.color = 'gold';
        }
      },
      clickDiv() {
        console.log('我点击了div');
        let color = document.getElementById('div').style.backgroundColor;
        document.getElementById('div').style.backgroundColor = color === 'blue' ? 'red' : 'blue';
      }
    }
  });
</script>

v-on:click的简写：@click="clickDiv"

v-for:循环

假如说我想渲染n个数据，以下是标准语法示例：

html 复制代码

<div id="app">
  <div v-for="(item,index) in fruits" :key="index">{{index+','+item}}</div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      fruits:['苹果','香蕉','梨子'],
        },
  });
</script>

如果你想左边显示成

那么index+1即可

html 复制代码

<div id="app">
  <div v-for="(item,index) in fruits" :key="index">{{(index+1)+','+item}}</div>

 </div>

tips：

这个 v-for 循环会遍历 fruits 数组中的每一个元素，并为每个元素生成一个 div 元素。在循环中，item 代表当前遍历到的数组元素，index 则表示当前元素在数组中的索引。

item 是每次迭代中当前遍历到的数组元素，比如第一次迭代时是 '苹果'，第二次是 '香蕉'，以此类推。

index 是每个元素在数组中的索引值，从 0 开始。第一次迭代时 index 是 0，第二次是 1，以此类推。

v-for="(item, index) in fruits" 中的 (item, index) 是解构语法，用来从遍历的数组元素中提取当前元素和对应的索引值。

在每个循环中，{``{ (index + 1) + ',' + item }} 是在 div 中显示当前循环的索引加一和数组元素。因为索引是从 0 开始，加一是为了显示人类习惯的从 1 开始的索引。

示例2:遍历数组

动态class style

通过变量来绑定样式：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
  <style>
    /* 定义一个 CSS 类名为 active，用于设置文本颜色为红色 */
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 下拉菜单和菜单项的布局 -->
  <div style="display:flex;margin-top:30px">
    <!-- 下拉选择框 -->
    <select v-model="currentMenu">
      <option value="首页">首页</option>
      <option value="教师">教师</option>
      <option value="学生">学生</option>
    </select>
    <!-- 循环渲染菜单项 -->
    <div style="padding:0 10px;"
         <!-- 动态设置菜单项的字体大小 -->
         :style="{ fontSize: item === currentMenu ? '20px' : '14px' }"
         <!-- 根据条件动态添加或移除 active 类 -->
         :class="{'active': item === currentMenu}"
         v-for="item in menus" :key="item">{{ item }}</div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      // 定义菜单数组
      menus: ['首页', '教师', '学生'],
      // 当前选中的菜单项，默认为 "首页"
      currentMenu: '首页'
    },
  });
</script>
</body>
</html>

运行结果：

vue脚手架搭建

Vue CLI官网文档地址：安装 | Vue CLI

在mac上安装Vue CLI：