VUE-基本的写法

一:模板语法:

1.{{ }}:数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值

2.v-html :指令用于输出 html 代码

<div id="app7">
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
	var obj={
		rawHtml:"<span>Hello jennifer</span>"
	};
	var vm=new Vue({
		el:'#app7',
		data:obj,
	});
</script>

输出后的内容:

    Using mustaches: <span>Hello jennifer</span>

    Using v-html directive: Hello jennifer

备注:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。  

 

3.v-bind :HTML 属性中的值应使用 v-bind 指令(缩写:v-bind:href="url"    /  :href="url"   )

4.v-if :根据表达式 seen 的值(true 或 false )来决定(v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。)

   *.因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

   注意我们不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅风格指南

   当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用

   v-else:

   v-else if:

5.v-show:指令来根据条件展示元素(v-show 只是简单地切换元素的 CSS property display

   注意,v-show 不支持 <template> 元素,也不支持 v-else

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

 

6.v-for:我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果:
·Foo
·Bar

也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法: 

<div v-for="item of items"></div>

2.2.0+ 的版本里,当在组件上使用 v-for 时,key 现在是必须的。  

 

5. v-on :它用于监听 DOM 事件(缩写:v-on:click="change"   /   @click="change")

  事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。  

2.1.4 新增

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

2.3.0 新增   Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
*鼠标按钮修饰符

 

  

6.修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定

7.v-model :v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定

8.过滤器

9.v-once:   只要加上了这个属性,能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

<div id="app7">
	<p v-on:click="message = 'jennifer'" v-once>{{message}}</p>    //加上了v-once后,点击事件不会执行了
</div>
<script>
	var obj={
		message:"Hello world!"
	};
	var vm=new Vue({
		el:'#app7',
		data:obj,
	});
</script>  

 

10.Object.freeze(obj):Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。

<div id="app7">
	<p v-on:click="message = 'jennifer'">{{message}}</p>
</div>
<script>
	var obj={
	    message:"Hello world!"
	};
	Object.freeze(obj);     //备注:这段代码的执行会阻止P标签的点击事件无效。
	var vm=new Vue({
		el:'#app7',
		data:obj,
	});
</script>

 

11.computed:计算属性(setter(做了修改后执行)、getter(未修改前的正常执行))

<div id="app7">
	<p>{{message}}</p>
	<p>{{reversedMessage }}</p>
</div>
<script>
	var obj={
		message:"Hello world!"
	};
        var vm=new Vue({
	     el:'#app7',
	     data:obj,
	     computed:{
		  reversedMessage(){
		        return this.message=this.message.split("").reverse().join(".")
		  }
	     }
        });
</script>

上面的操作,我们可以通过在表达式中调用方法来达到同样的效果:
<div id="app7">
	<p>{{message}}</p>
	<p>{{reversedMessage()}}</p>
</div>
<script>
	var obj={
		message:"Hello world!"
	};
        var vm=new Vue({
	     el:'#app7',
	     data:obj,
methods:{

reversedMessage(){
		        return this.message=this.message.split("").reverse().join(".")
		  }

} }); </script>
重点解读:不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

 

12:watch:侦听属性

<div id="app8">{{name}}</div>
<script>
	var vm=new Vue({
		el:"#app8",
		data:{
			firstName:"刘",
			lastName:"希贤"
		},
		computed:{
			name(){
				return this.name=this.firstName+this.lastName      
			}
		}
	})
</script>
结果输出:刘希贤

方法二:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
  • filter()concat() 和 slice()

  

 

posted @ 2020-06-01 13:09  MiniDuck  阅读(2111)  评论(0编辑  收藏  举报