vue简单指令

最新推荐文章于 2022-06-19 19:13:19 发布

qq_38504352

最新推荐文章于 2022-06-19 19:13:19 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/qq_38504352/article/details/103918896

版权

v-html和v-text指令
在这里插入图片描述
属性绑定和事件绑定v-on和v-bind

vue双向绑定-v-model表单

类型一：把数据绑定到特定文本或特性
1、v-bind:绑定元素特性

<div id="app-2">
<!DOCTYPE html>

<html>
	
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app2">
			<!--<span v-bind:title="message">-->
			<span :title="message">
				鼠标在此悬停几秒钟查看动态绑定的信息
			</span>
		</div>
		<script>
			const app=new Vue({
				el: '#app2',
				data: {
					message: "页面加载与:"+new Date().toLocaleString()
				}
			})
		</script>
	</body>

</html>

2、v-if：控制切换一个元素是否显示

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

3、v-for:绑定数组的数据来渲染一个项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目

类型二：处理用户和应用交互
1、v-on:添加一个事件监听器

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
2、v-model：实现表单输入和应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})