vue实例

最新推荐文章于 2022-07-18 15:20:44 发布

伪成年_young

最新推荐文章于 2022-07-18 15:20:44 发布

阅读量98

点赞数

分类专栏： vue 文章标签： vue知识

本文链接：https://blog.csdn.net/u012552674/article/details/100129210

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

基于vue的helloworld的实例
步骤：

引入vue的js文件
vue.js下载地址
创建vue对象
new Vue()
实现vue对象中的配置
el:
data:
实现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>
    <!-- 1.引入vue的js文件，会在当前系统对象上挂载一个Vue成员 -->
    <script src="./js/vue2.js"></script>
</head>
<body>
    <!-- 4.添加指定标识的模板结构 -->
    <h1>{{msg}}</h1>
    <div id='app'>
        <!-- 5.使用插值表达式来添加占位，这个占位后期会被对应名称的属性值替换 -->
        <h1>{{msg}}</h1>
    </div>
    <script>
        // 2.创建vue对象,通过Vue构造函数来创建
        // vue对象可以实现数据和模板的关联，将数据渲染到指定的模板
        var vm = new Vue({
            // 3.添加常用配置
            // 3.1 指定模板.当指定模板之后，将来vm实例只能控制app结构，以后app结构内的操作vm可以实现，但是如果你的相关代码写在app结构外，将不会被处理
            el:'#app',
            // 3.2 指定数据,数据都可以在data中添加
            data:{
                msg:'helloworld'
            }
        })
    </script>
</body>
</html>

插值表达式：

作用：实现数据绑定：数据替换
使用方法：
可以拼接字符串
可以算数运算
可以添加三元表达式
可以调用api方法
不能添加js逻辑语句

v-text：

指令：相当于标签中的属性，在使用时候的格式：指令=“值”
作用：可以将制定的成员值放置到指定的标签之间
使用：v-text=“值”，值必须是定义过的属性名称
扩展：
使用表达式
使用三元表达式
调用api函数

v-html：

作用：可以解析html结构。
使用方式：v-html=“值”

v-bind：

作用：动态绑定数据成员，任何属性都能动态绑定
使用方法：v-bind：属性名称=“动态数据”
动态绑定样式：
v-bind:class="{样式名称：bool值}"
v-bind:class="[claA,claB]"

v-for:

作用：实现遍历，可以遍历对象，也可以遍历数组
使用方式：v-for=" "
遍历数组：v-for="(value,index) in arr"
遍历对象：v-for="(value,key,index) in obj"
补充说明：key
设置key可以提高页面刷新效率

v-model：

作用：实现双向数据绑定
修改数据，页面有变化，修改页面中的数据，数据源有变化
只有能够实现用户交互的元素才能添加双向绑定：input、select、textarea
使用方法：v-model=“值”

v-on：

作用：实现事件绑定
使用方法：v-on：事件名称=“事件处理函数” / v-on：事件名称=“事件处理函数（参数）”
简写：@

修饰符：

.prevent:阻止默认行为
.stop阻止点击事件继续传播

v-if：

根据值决定是否创建指定的元素
v-if=“值”：值是bool值
创建或不创建元素

v-show：

根据值俩设置元素的display样式
v-show=“值”，值是bool值
将元素的display设置为block或none

v-if v-else-if v-else

使用方法和v-if相似

v-cloak：

作用：可以隐藏指定的元素，直到当前vm实例编译完毕
使用场景：不希望页面中出现未编译的标签
使用方法：添加指定的样式，未元素添加v-cloak

<style>
	[v-cloak]{
		display:none;
	}
</style>
<div id="app">
	<p v-cloak>{{msg}}</p>
</div>

v-pre，v-once

<div id="app">
<!--这个标签中插值不会被解析-->
	<p v-pre>{{msg}}</p>
<!--只渲染一次，后期的渲染会跳过这个元素-->
	<p v-once>{msg}</p>
</div>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			msg:"你好"
		}
	})
</script>

伪成年_young

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例

基于vue的helloworld的实例步骤：引入vue的js文件vue.js下载地址创建vue对象new Vue()实现vue对象中的配置el:data:实现vue数据对应的模板插值表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫