Vue.js 指令速查（待更新）

最新推荐文章于 2023-06-27 10:42:07 发布

菜鸟M

最新推荐文章于 2023-06-27 10:42:07 发布

阅读量138

点赞数

分类专栏： Vue.js 文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/weixin_43592907/article/details/106631505

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入

Vue.js初学目录

- 1.Vue构造器
- 2.Vue指令

1.Vue构造器

var vm = new Vue({ //选项
el ：参数，它是 DOM 元素中的 id。
data ：属性，实例中有三个属性分别为：site、url、alexa。
methods ：函数，通过 return 来返回函数值。
})
{{ }} 用于输出对象属性和函数返回值。

Vue 提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

<body>

<div id="app">
 	<h1>site : {{site}}</h1>
	<h1>url : {{url}}</h1>
	<h1>{{details()}}</h1>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
	   			site: "菜鸟教程",
			  	url: "www.runoob.com",
				alexa: "10000"  //不会显示出来
		},
	   	methods: {
					details: function() {
						return  this.site + " - 学的不仅是技术，更是梦想！";
					}
		}
	})
	document.write(vm.$el === document.getElementById('app')) // true
</script>
</body>

2.Vue指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

v-html 指令：输出 html 代码；
下例中输出为：菜鸟教程，不包括<h1>

<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

v-if 指令：根据属性的值(true 或 false )来决定是否插入 p 元素。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <p>学的不仅是技术，更是梦想！</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {seen: true, ok: true}
})
</script>

v-else： v-else 指令给 v-if 添加一个 “else” 块：

<div id="app">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
<script>
new Vue({
  el: '#app'
})
</script

v-else-if： 用作 v-if 的 else-if 块。可以链式的多次使用：

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-show： 用 v-show 指令来根据条件展示元素：
与v-if的区别：
v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示，值为 false 时，该元素隐藏，但仍然存在于 dom 树中。

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

v-bind指令：被用来响应地更新 HTML 属性：(参数(href)在指令后以冒号指明。)

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
    //v-bind:class=''
   	//v-bind:id=''
</div>
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})

v-on指令： v-on 指令，它用于监听 DOM 事件，并对用户的输入进行响应。
借鉴：https://www.jianshu.com/p/5d2ca05b70b3

div class="app">
    <button v-on:click="myclick">click me</button>
    //当myclick() 无参数时，可以省略 ()
</div>

<script> 
var app = new Vue({
    el:'.app',
    data:{},
    methods:{
        myclick:function(){
            console.log(111111);
        }
    }
});
</script>

v-on还可以绑定多个事件

<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>

var app = new Vue({
    el:'.app',
    data:{},
    methods:{
        myclick:function(){			键名：事件名	 键值：回执方法
            console.log("clicked");	
        },
        onenter:function(){
            console.log("mouseented");
        },
        leave:function(){
            console.log("mouseleaved");
        }
    }
});

修饰符： 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
只要在事件的后面添加一个.prevent修饰符，表示阻止默认事件。
下例中：form表单提交后，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面，使用.prevent：阻止这种默认事件的发送

 <form v-on:submit.prevent="onSubmit"></form>

v-model ： 来实现双向数据绑定，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
下例：当输入框中输入什么，页面中就会显示什么

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
	
<script>
new Vue({
  el: '#app',
  data: { message: 'Runoob!'}
})</script>

过滤器： Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

缩写：Vue.js 为两个最为常用的指令提供了特别的缩写：
v-bind：href -----------------> ：href
v-on：click ------------------>：@click

 <!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

菜鸟M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 指令速查（待更新）

在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入Vue.js初学目录1.Vue构造器2.Vue指令1.Vue构造器var vm = new Vue({ //选项    el ：参数，它是 DOM 元素中的 id。    data ：属性，实例中有三个属性分别为：site、url、alexa。    methods ：函数，通过 return 来返回函数值。}){{ }}.
复制链接

扫一扫