Vue --- vue基础语法01

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

-唐醋小排骨

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

阅读量773

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ty0714/article/details/124423427

版权

本文详细介绍了Vue.js的基础语法，包括模板语法的插值、HTML指令、属性绑定、表达式等。深入讲解了核心指令如v-if、v-else、v-for、v-bind、v-on和v-model的用法，以及动态参数和过滤器的使用。还探讨了计算属性和监听属性的区别，以及何时选择使用它们。

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

1. 模板语法
## demo1.hrml
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>

代码案例：

<!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: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 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:true,
				id:101
			},
			methods:{
				
			}
		});
	</script>
</html>

运行结果：