• 2022/08/27 吉软 Vue

  ---

  目录

  Vue前言

  概述：

  特点：

  一、 Vue导入

  概述：

  语法：

  基本使用：

   二、Vue基本语法

  1.插值表达式

  概述：

  2.显示数据(v-text和v-html)

  概述：

  语法：

  区别：

  3.数据双向绑定数据(v-model)

  概述：

  注意：

  3.1.绑定文本框 

  效果： 

  3.2.绑定单个复选框

  3.3.绑定多个复选框

  ​4.事件处理(v-on)

  4.1.事件绑定(v-on)

  5.循环遍历(v-for)

  5.1.遍历数组

   5.2.key

  6.判断语法(v-if和v-show)

  8.显示数据(v-bind)

  ---

  Vue前言

  概述：

          Vue是一款前端渐进式框架，可以提高前端开发效率。

  特点：

  ​         Vue通过MVVM模式,能够实现视图与模型的双向绑定。简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

  一、 Vue导入

  概述：

          Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

  语法：

  基本使用：

  "app">
      
  用户名:"text" v-model="name"/>
   
      
  您输入的用户名是: {{name}}
  



 二、Vue基本语法

1.插值表达式

概述：

        插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：

   {{ 变量名/对象.属性名 }}

案例：

"en">
    "UTF-8">
    
    
    
"app">
        
欢迎来到-->{{ name }}
    

2.显示数据(v-text和v-html)

概述：

        ​ v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题。当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法：

v-text："msg">    
v-html："msg">    

区别：

v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析

3.数据双向绑定数据(v-model)

概述：

​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

• 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
• 文本框/单选按钮/textarea, 绑定的数据是字符串类型
• 单个复选框, 绑定的是boolean类型
• 多个复选框, 绑定的是数组
• select单选对应字符串，多选对应也是数组

3.1.绑定文本框 

代码:

"app">
    用户名: "text" v-model="username"/>

效果： 

 

3.2.绑定单个复选框

代码:

"app">
    "checkbox" v-model="agree">同意

效果:

3.3.绑定多个复选框

代码:

"app">
    "checkbox" value="Java" v-model="language">Java
    "checkbox" value="Python" v-model="language">Python
    "checkbox" value="Swift" v-model="language">Swift

效果:

4.事件处理(v-on)

4.1.事件绑定(v-on)

概述：

​ Vue中也可以给页面元素绑定事件.

语法：

"函数名/vue表达式">点我
"函数名/vue表达式">点我

注意：

​ Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

案例：

"en">
    "UTF-8">
    
    
    
"app">
        @click="show">点我
    
    

5.循环遍历(v-for)

5.1.遍历数组

语法：

v-for="item in items"
v-for="(item,index) in items"

items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。

代码：

"app">
	
        
for="(user, index) in users">
        	{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        
	

 5.2.key

概述：

​ :key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.

案例:

"app">
    @click="add">添加
    
        
        
for="name in list" :key="name">
            "checkbox"> {{name}}
        
    

6.判断语法(v-if和v-show)

概述：

v-if与v-show可以根据条件的结果,来决定是否显示指定内容.

​ v-if: 条件不满足时, 元素不会存在.

​ v-show: 条件不满足时, 元素不会显示(但仍然存在).

案例：

"app">
	@click="show = !show">点我
	
if="show">Hello v-if.
    
"show">Hello v-show.

8.显示数据(v-bind)

概述：

v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

语法：

<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
<标签名 :标签属性名="vue实例中的数据属性名"/>

 案例：

"app">
    "button" :value="msg"/>