VUE简介和基本使用

最新推荐文章于 2023-06-13 17:29:22 发布

weixin_45846980

最新推荐文章于 2023-06-13 17:29:22 发布

阅读量270

点赞数

分类专栏：参考类 jq 技术类文章标签： vue

本文链接：https://blog.csdn.net/weixin_45846980/article/details/111414171

版权

参考类同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

技术类

15 篇文章 1 订阅

订阅专栏

Web前端——VUE

终于到了我们与生产环境最息息相关的技术——VUE,接下来我会从VUE简介到基本使用,给大家能基本入门VUE

1.VUE简介

渐进式JavaScript框架：vue适合不同层次的开发人员，比如简单的数据交互，数据与视图的绑定操作，可以直接用vue操作。
vue两大特点：响应式编程、组件化。
完善的生态环境：vue router，vuex，Nuxt。
强大的组件化应用构建
声明式渲染，所有的元素都是响应式的。

缺点

VUE不支持IE8及以下的浏览器

VUE官网
在这里插入图片描述

2.VUE基础

说到基础使用，一个完美的开发者文档，是一个能直接复制案列而不会报错的文档，我们来尝试下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
      </div>


<!-- 开发环境版本，包含了有帮助的命令行警告  类似于为压缩版的jquery   有很多错误处理  有错误会在终端报错 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度  类似于jquery.min.js   -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

<script>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})


</script>
</body>
</html>

在这里插入图片描述
可以看出是可以完美运行的,这个案例只是简单使用VUE入门内容控制变量操作DOM

注意的点

不可以将Vue挂载到 body或者html标签上面

2.VUE指令

VUE指令可以基本代替js中对DOM操作，许多需要写很多js原生功能才能完成的功能，可能在VUE中一个指令就可搞定.下面我来介绍下基础指令

指令：Vue给标签设计的属性叫做指令。指令的本质就是标签属性。只不过是以v-xxx开头。

语法:<标签名 v-指令名="变量/表达式"></标签名>

v-text

作用：渲染数据到标签里面
简写方式：{{}}
会覆盖原本html内容
不能解析html
共存的话 {message}}我不好

<div id="app">
       <h1>{{message}}</h1>//简写方式，数据渲染到页面上<h1>你好</h1> 
       <h1 v-text="message"></h1>//指令方式，数据渲染到页面上<h1>你好</h1> 
       <h1 v-text="message">我不好</h1>//可以覆盖html内容<h1>你好</h1> 
       <h1>{{message}}我不好</h1>//共存<h1>你好我不好</h1> 
       <h1 v-text="a"></h1>//不能解析html
</div>
//js
<script>
    // 创建一个vue对象
    var app = new Vue({
   
        el: '#app',

        // 渲染到页面上的数据
        data: {
            message: '你好 ',
            a : "<a href='#'> 我是一个a链接</a>"
        }
    })
</script>

v-html

可以把数据渲染到页面上
没有简写方式
可以解析文本
如果字符串里面包含标签也可以解析
相对于v-text 使用频率不高

<div id="app">
       <h1 v-html="message"></h1>
       <h1 v-html="message">你好</h1>
       <h1 v-html="a"></h1>
    </div>
    //js
    // 创建一个vue对象
    var app = new Vue({
   
        el: '#app',

        // 渲染到页面上的数据
        data: {
            message: '哈哈哈? ',
            a : "<a href='#'> 我是一个a链接</a>"
            
        }
    })

v-on

DOM事件绑定
简写方式：@事件名=“事件处理函数”
语法 v-on"事件名"=“事件处理函数”
可以传参事件绑定里面传实参
可以修改使用this 注意this指向
处理事件 @focus @blur @change …

<标签 v-on:事件名="事件函数"></标签>
	<标签 v-on:事件名="事件函数()"></标签>
	
	<标签 @事件名="事件函数"></标签>
	<标签 @事件名="事件函数()"></标签>
	
	// JS中
	new Vue({
	   ...
	   methods:{
	   		事件函数(){
	   		  ...
	   		}
	   }
	})

v-bind

绑定属性的指令 ,绑定事件在哪一个属性中发生
简写方式：:属性名=“表达式”
语法 v-on"事件名"=“事件处理函数”
可以传参事件绑定里面传实参
可以修改使用this 注意this指向
处理事件 @focus @blur @change …

//css
  .red {
            background-color: #f00;
        }
 <div id="app">
 		//控制isRed为ture/false
        <input type="button" value="切换背景" @click="isRed = !isRed">
        //控制trtue/false是否有这个属性产生
        <div :class="{red:isRed}"></div>
</div>
//js
    <script>
            const app = new Vue({
                el :"#app",

                data : {
                    isRed : true
                }
        </script>

v-for

作用：遍历数组或对象
注意：
- 多层循环嵌套，只要注意标识符名不要和外层冲突；搞清楚内层循环的变量是谁
- 为了防止"就地复用"，我们给每个循环项都添加上一个key属性，注意key属性值不能相同

<div id="app">
		//循环打印数组中数据
        <p v-for="item in songList" @click="sing(item)">{{item}}</p>
        //点击当前的p标签得到当前数据
        <p v-for="(item, index) in songList">{{item}} -- {{index}}</p>  
</div>
//js
<script>
        const app = new Vue({
            el :"#app",
            data : {
                songList : ["天下", "微微", "凉凉", "花心", "爱的供养"]
            },
            methods : {
                sing(song) {
                    alert(song);
                }
            }
        })
</script>

v-if

作用：条件渲染，切换显示不同的模板内容
注意：适用于一次性渲染

<标签 v-if="变量/表达式">展示的内容</标签>

	<标签 v-if="变量/表达式">展示的内容1</标签>
	<标签 v-else>展示的内容2</标签>

	 <标签 v-if="变量/表达式">展示的内容1</标签>
	<标签 v-else-if="变量/表达式">展示的内容2</标签>
	<标签 v-else-if="变量/表达式">展示的内容3</标签>
	...
	<标签 v-else>展示的内容其他</标签>

本片基础入门VUE就到这里，因篇幅过长，下篇在详解下vue里面的用法和注意事项，里面的案例都可在官网中的去找到，大家就先敲下，希望本篇文章能上手vue，嘻嘻嘻

weixin_45846980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
VUE简介和基本使用

Web前端——VUE 终于到了我们与生产环境最息息相关的技术——VUE,接下来我会从VUE简介到基本使用,给大家能基本入门VUE1.VUE简介渐进式JavaScript框架：vue适合不同层次的开发人员，比如简单的数据交互，数据与视图的绑定操作，可以直接用vue操作。vue两大特点：响应式编程、组件化。完善的生态环境：vue router，vuex，Nuxt。强大的组件化应用构建声明式渲染，所有的元素都是响应式的。缺点VUE不支持IE8及以下的浏览器VUE官网2.VUE基础
复制链接

扫一扫