VUE基础，使用，模板语法,v-model

最新推荐文章于 2024-04-09 14:48:57 发布

噢，我明白了

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量446

点赞数 3

分类专栏： vue基础文章标签： vue javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_38980678/article/details/114337225

版权

vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.使用

1.引入

可以引入在线的，
也可以下载下来保存到本地，建议下载下来，保存到本地，可以方便在没有网络的情况下也能进行测试

在线地址：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载到本地文件直接按存放地址引入：

<script src="vue.js"></script>

2.初始化VUE

要new使用，参数为对象，对象的内部为配置信息，也叫选项 const vm = new Vue(options);

3.options解析

Vue的配置信息，对象数据，键名由Vue指定，值由Vue约束
内含多个选项，如：el,data,methods,computed等…
vue管理之后，由数据影响视图，数据本质为变量

4.el选项（标记需要使用vue的容器）

用来标记需要使用vue渲染的容器

<body>
<div id="app">
</div>
</body>
<script>
const vm = new Vue({
el:"#app"//需要使vue渲染的容器
})
</script>

5.data选项 + 模板语法-插值

用于设置vue实例中需要使用的数据插值语法

1.{{变量}}

中间写变量进行解析vue中的数值

2.data：用来定义变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id ="app">
	<!-- 解析data中的msg -->
	<!-- v-bind 为绑定属性方式，title会带来鼠标悬停效果 -->
	<div v-bind:title="tit">{{msg}}</div>
	</div>
	</body>
	<!-- 引入vue -->
	<script src="vue.js"></script>
	<script>
	const vm = new Vue({
	el:"#app",  //指定使用vue的容器，建议使用ID命名
	data:{
	msg:"hello vue",
	tit:"鼠标悬停效果"
	}
	})
	</script>	
</html>

运行结果：
在这里插入图片描述

二.模板语法-指令

1.vue提示的固有指令

指令	功能
v-text	模板语法-插值-不解析html
v-html	模板语法-插值-解析html
v-show	条件判断
v-bind	绑定属性
v-else	条件判断
v-else-if	条件判断
v-for	列表循环
v-on	绑定事件
v-model	双向数据绑定，主要用于表单控件
v-slot	插槽
v-pre	跳过这个元素和他的子元素的编译过程
v-cloak	这个指令保持在元素上直到关联实例结束编译
v-once	只渲染元素和组件一次

2.插值语法
{{}}, v-text(不会解析标签), v-html（会解析标签）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id ="app" style="border:solid 2px #aaa;padding:20px;">
	<div v-bind:title="tit">{{msg1}}</div>
	<div v-bind:title="tit">{{msg2}}</div>
	<div v-text="msg1"></div>
	<div v-text="msg2"></div>
	<div v-html="msg1"></div>
	<div v-html="msg2"></div>
	</div>
	</body>
	<!-- 引入vue -->
	<script src="vue.js"></script>
	<script>
	const vm = new Vue({
	el:"#app",  //指定使用vue的容器，建议使用ID命名
	data:{
	msg1:"hello vue",
	msg2:"<mark>vue</mark>"
	}
	})
	</script>
	
</html>

运行结果：
在这里插入图片描述

3.双向绑定
v-model

用在表单元素身上,不同的表单控件,表示不同的含义
表示当前表单控件的状态
输入框->内容
复选项->选中状态
下拉菜单->当前选项
文本域->内容
…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <span>{{a}}</span> - <input type="text" v-model="a" /><br>
      <span>{{b}}</span> - <input type="radio" name="sex" v-model="b" value="男" />男<br>
      <input type="radio" name="sex" v-model="b" value="女" />女<br>
      <span>{{c}}</span> - <input type="checkbox" v-model="c"/><br>
      <span>{{d}}</span> - <select name="" v-model="d">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
      </select><br>
      <span>{{e}}</span> 
      <input type="checkbox" v-model="e" name="like" value="蓝球"/>篮球
      <input type="checkbox" v-model="e" name="like" value="足球"/>足球
      <input type="checkbox" v-model="e" name="like" value="排球"/>排球
      <input type="checkbox" v-model="e" name="like" value="羽毛球"/>羽毛球
    </div>
	</body>
  	<script src="vue.js"></script>
  <script type="text/javascript"> 
    var vm = new Vue({
      el:"#app",
      data:{
        a:"",
        b:true,
        c:"",
        d:"",
        e:[]
      }
    })
    
  </script>
</html>

运行结果：
在这里插入图片描述

原理：通过视图改变data中变量的数据，在通过数据影响视图

噢，我明白了

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
VUE基础，使用，模板语法,v-model

一.使用1.引入可以引入在线的，也可以下载下来保存到本地，建议下载下来，保存到本地，可以方便在没有网络的情况下也能进行测试在线地址：<script src="https://cdn.jsdelivr.net/npm/vue"></script>下载到本地文件直接按存放地址引入：<script src="vue.js"></script>2.初始化VUE要new使用，参数为对象，对象的内部为配置信息，也叫选项 const vm =
复制链接

扫一扫

专栏目录