Vue的基础语法

最新推荐文章于 2024-02-19 09:00:00 发布

周大福ye

最新推荐文章于 2024-02-19 09:00:00 发布

阅读量115

点赞数

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

本文链接：https://blog.csdn.net/weixin_64987028/article/details/124426374

版权

本文详细介绍了Vue.js的基础语法，包括模板语法的插值、指令、过滤器、计算属性和监听属性。重点讲解了v-if、v-else、v-else-if、v-for、v-bind、v-on、v-model等核心指令的用法，以及计算属性与监听属性的区别。

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

模板语法

1.插值

1.1文本

{ {msg}}

1.2html

使用v-html指令用于输出html代码

1.3属性

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

1.4表达式

Vue提供了完全的JavaScript表达式支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- cdn -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		
	</head>
	<style>
		.cl{
			color: aqua;
		}
	</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:绑定标签属性值
				3){
  {}}:插值，针对标签中文本值进行插入操作 -->
				<span v-bind:class="cls">
					郑业成最帅！
				</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:false,
				id:101
			},
			methods:{
				
			}
		});
	</script>
</html>

效果图

注意事项

v-model:数据双向绑定

v-bind:绑定标签属性值

{ {}}:插值，针对标签中文本值进行插入操作

2.指令

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

2.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

实例代码：

<body>	
	<!-- 定义管理边界 -->
		<div id="app">
			<h1>{
  {ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if/v-else-if/v-else</li>
				<span v-if="good=='ok'">
					沈宴很行
				</span>
				<span v-else-if="good=='no'">
					沈宴不行
				</span>
				<span v-else>
					沈大人，无病呻吟！！！
				</span>
        </ol>
    </div>
    </body>

    
    <script>
		//每一个vue实例都是从new一个构造函数开始
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				good:'ok',
			
		
			},
			methods:{
				
			}
		});
	</script>

v-show：与v-if类似，只是会渲染其身

最低0.47元/天解锁文章

周大福ye

关注

0
点赞
踩
0

收藏

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

目录模板语法1.插值1.1文本1.2html1.3属性1.4表达式2.指令2.1核心指令2.2 参数、动态参数及简写3.过滤器4.计算属性5.监听属性总结：计算属性和监听属性的区别模板语法1.插值1.1文本{{msg}}1.2html使用v-html指令用于输出html代码1.3属性HTML属性中的值应使用v-bind指令1.4表达式 Vue提供了完全的JavaScript表达式支...
复制链接

扫一扫

专栏目录