vue基础语法01

柚子子@

已于 2022-04-26 17:14:27 修改

阅读量743

点赞数

文章标签： vue

于 2022-04-26 16:47:19 首次发布

本文链接：https://blog.csdn.net/m0_67476502/article/details/124426482

版权

本文详细介绍了Vue的基础语法，包括插值的文本、HTML、属性和表达式用法，指令如v-if、v-else、v-for、v-bind的参数和简写，以及过滤器和计算属性的使用。同时，提到了数据双向绑定v-model和监听属性watch的概念。

摘要由CSDN通过智能技术生成

1.1 插值

1.1.4 表达式

完整代码

1.2 指令（指的是带有“v-”前缀的特殊属性）

1）v-model:数据双向绑定
2）v-bind：绑定标签属性值，例如：v-bind:class/v-bind:id
3）{ {}}:插值，针对标签中文本值进行插入操作

1.1 插值

1.1.1 文本
{ {msg}}
1.1.2 html
使用v-html指令用于输出html代码

1.1.3 属性
HTML属性中的值应使用v-bind指令

错误：报错，不变色

正确：变色

1.1.4 表达式

Vue提供了完全的JavaScript表达式支持
{ {str.substr(0,6).toUpperCase()}}：截取0-6，转成大写
{ { number + 1 }}
{ { ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>：接list+后面id的值

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<style>
		.cl{
			color: aqua;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{
  {ts}}</h1>
			<h2>1，插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{
  {msg}}
				</span>
				<li>html</li>
				<span v-html="html"></span>
				<li>v-bind绑值</li>
				<!-- 
				1）v-model:数据双向绑定
				2）v-bind：绑定标签属性值，例如：v-bind:class/v-bind:id
				3）{
  {}}:插值，针对标签中文本值进行插入操作
				 -->
				<span v-bind:class="cls">
					新游记真好看！！
				</span>
				<li>表达式</li>
				{
  {msg.substr(0,6).toUpperCase()}}
				{
  { number + 1 }}
				{
  { ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

			</ol>
		</div>
	</body>
	<script>
	   va