vue的模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上

数据绑定最常见的形式就是使用 {{...}}的文本插值:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: '你好!'
  }
})
</script>
</body>
</html>

表达式

vue提供了完全的 JS 表达式支持

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="content">
	{{5+5}}<br>
	{{ ok ? 'yes' : 'on' }}<br>
	{{ message.split('').reverse().join('') }}
	<div v-bind:id="'list-' + id">哈喽</div>
</div>
	
<script>
new Vue({
  el: '#content',
  data: {
	ok: true,
    message: 'RUNOOB',
	id : 1
  }
})
</script>
</body>
</html>

vue指令

在vue中 前面带v-的都是vue指令

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="content">
    <p v-if="hello">11111</p>
    <template v-if="yes">
      <p>2222</p>
      <p>333333</p>
      <p>44444</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#content',
  data: {
    hello: true,
    yes: true,
  }
})
</script>
</body>
</html>
相关推荐
速易达网络25 分钟前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘31 分钟前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way33 分钟前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家1 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽3 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头3 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全4 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing4 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript