vue2入门

vue2官方文档：安装 — Vue.js

1、安装

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

直接用

tips:

CDN:一个网络加速的技术

完整代码如下：

此时就已经引入成功了

2、vue的变量渲染

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

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

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

  {{message}}
  

    {{num++}}

  
  

    {{bool}}
  
  
{{bool?'a':'b'}}

显示结果：

数组示例：

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

 {{arr.find(v =>v.name ==='张三')?.age}}

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

v-html（模版）

有时候我们想渲染一个html

v-model(双向绑定值)

  
  
{{count}}

效果：

v-if（判断）

红色
  
蓝色
 

结果显示红色

v-bind:动态绑定属性

搜索一下

v-bind简写是搜索一下

v-on:事件绑定

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

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

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

例2:

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

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

v-for:循环

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

  
{{index+','+item}}
 

如果你想左边显示成

那么index+1即可

  
{{(index+1)+','+item}}

 

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

通过变量来绑定样式：

  
  
  



  
  

    
    
      首页
      教师
      学生
    
    
    

         :style="{ fontSize: item === currentMenu ? '20px' : '14px' }"
         
         :class="{'active': item === currentMenu}"
         v-for="item in menus" :key="item">{{ item }}
  

运行结果：

vue脚手架搭建

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

在mac上安装Vue CLI：