vue基础语法

最新推荐文章于 2023-08-01 23:19:13 发布

長樂er.

最新推荐文章于 2023-08-01 23:19:13 发布

阅读量773

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_66277385/article/details/124450740

版权

模板语法

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()}}
{ { number + 1 }}
{ { ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

demo1.html

<!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:red
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{
  {ts}}</h1>
			<h2>插值</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>
					陈叶最美！{
  {msg}}
				</span>
				<li>表达式</li>
				<span>
					{
  {msg.substr(0,6).toUpperCase()}}
					{
  { number + 1 }}
					{
  { ok ? 'YES' : 'NO' }}
					<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				msg:'hello vue!!!',
				html:'<input type="text" value="2"/>',
				cls:'cl',
				number:'10',
				ok:true,
				id:101
			},
			methods:{
				
			}
		});
	</script>
</html>

运行结果为：

指令

指的是带有“v-”前缀的特殊属性

1、核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for：类似JS的遍历，

最低0.47元/天解锁文章

長樂er.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础语法

模板语法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()}} {{ number...
复制链接

扫一扫