vue的基础使用

最新推荐文章于 2023-05-20 10:03:10 发布

小小小萌新12138

最新推荐文章于 2023-05-20 10:03:10 发布

阅读量171

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_53583255/article/details/126943480

版权

前言

学习vue的记录随笔

一、vue的基础使用方法

Vue.js的代码结构：

1-引入vue.js

2-写视图层，我们要展示的内容

3-实例化Vue()

data：存放数据
el：这个控制是哪块视图
methods：放我们的方法

    <!-- 插值表达式，可以读取我们的变量 -->
        {{ message }}
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!'
            },
methods:{
            
            }
        })
    </script>

插值表达式、v-cloak、v-text、v-html

如何获取变量值呢？

插值表达式{{}}，可以在前后插入一些内容
v-text：会替换掉元素里的内容
v-html：可以渲染html界面

<!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>v-clock防止界面闪烁</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 在我们vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：界面防止闪烁 -->
        <p v-cloak>
            -----------{{ message }}---------------
        </p>
        <!-- 使用v-text给界面元素赋值 -->
        <!-- 如果我们想在变量之前或者后面加一些内容的话使用插值表达式 -->
        <!-- 如果我们想直接覆盖元素内容的话使用v-text指令 -->
        <p v-text='message'>------------------------</p>
        <p v-text='html'>------------------------</p>
        <!-- 通过v-html指令把字符串解析成html的内容 -->
        <p v-html = 'html'>1111</p>
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                html:'<h1>这是一个很大的标题</h1>'
            }
        })
    </script>
</body>

</html>

v-bind

界面元素属性值的绑定

括号里不加引号的都是我们data里的数据读取
如果想使用字符串需要加上引号
里面可以写表达式
里面也可以调用定义好的方法，拿到的是方法的返回值

<!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>v-bind这指令用于属性的绑定</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        {{ message }}
        <!-- <button v-bind:title="nihao">按钮</button> -->
        <button :title="nihao">按钮</button>
        <input type="text" v-bind:value="message">
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                flag: false,
                nihao:'你好世界'
            }
        })
    </script>
</body>
</html>

v-on

进行事件的绑定，我们用的最多的是click事件绑定

简写@

<body>
  <div id="app">
    <button @click="start" :disabled="flag">浪起来</button>
      <button @click="stop" :disabled="!flag">别浪</button>
      <button disabled>hahahahaahahah</button>
      <div>{{msg}}</div>
  </div>
</body>

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../vue-2.4.0.js"></script>
		<style>
			header {
        margin: auto;
				width: 400px;
				height: 400px;
				background-color: blue;
			}
			article {
        margin: auto;
				background-color: red;
				width: 300px;
				height: 300px;
			}
      #app{ 
        width: 400px;
        margin: auto;
      }
		</style>
	</head>
	<body>
		<div id="app">
			冒泡
			<header @click="log3">
				<article @click.stop="log2">
					<button @click.stop="log1">按钮</button>
				</article>
			</header>
			捕获
			<header @click.capture="log3">
				<article @click.capture="log2">
					<button @click.capture="log1">按钮</button>
				</article>
			</header>
			一次
			<header @click="log3">
				<article @click="log2">
					<button @click.once="log1">按钮</button>
				</article>
			</header>
			self
			<header @click="log3">
				<article @click.self="log2">
					<button @click="log1">按钮</button>
				</article>
			</header>
			多个修饰符
			<header @click="log3">
				<article @click.self.stop="log2">
					<button @click="log1">按钮</button>
				</article>
			</header>
			prevent
			<div>
				<a @click.prevent="log1" href="https://www.baidu.com">
					vue</a
				>
				<a
					@click.prevent.once="log1"
					href="https://www.baidu.com"
				>
					vue</a
				>
			</div>
		</div>
	</body>
</html>
<script>
	let vue = new Vue({
		el: '#app',
		data: {
      
    },
		methods: {
			log1() {
				console.log(111111111)
			},
			log2() {
				console.log(2222111)
			},
			log3() {
				console.log(333333333)
			},
		},
	})
</script>