Vue的基本用法

当然要引入vue.js

1.基本写法和作用域和绑定数据

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

每次都要new一个Vue的对象,必填属性是el,内容是一个作用域的id,在本例中,只有div-id:app内部的元素才能使用vue的一些特性.

其中data里是初始化数据,那么在作用域里使用{{}}就可以及时的显示和改变.

2.显示计算函数结果

<div id="app">
  	{{ message }}<p/>
	{{myMethod()}}<p/>
	{{true?"OK":"false"}}
	<!--{{alert(1)}}-->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods:{
  	myMethod:function(){
		return "555";
	}
  }
})

{{}}内部可以显示执行函数计算结果,只能显示函数计算结果,但不能执行其他.

3.绑定html

<div id="app" >
	<div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello Vue.js!</h1>',
  }
})
</script>

v-html可以将内容以html标签进行解析.

4.事件

<div id="app" >
    <button v-on:click="myclick">点击1</button>
    <button @click="myclick">点击2</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello Vue.js!</h1>',
  },
  methods:{
	myclick:function(){
		alert(1)
	}
  }
})

v-on:事件来触发方法,同时可以简写成@事件.

5.绑定数据

<div id="app" >
	<input type="text" v-model="message">
	{{message}}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '你好啊',
  }
})

input的初始值就是你好啊,当修改input的值的时候,{{}}大括号里面的值也在改变,v-model的作用是相互的.

6.修改节点属性

<div id="app" >
	<input type="text" v-model="message">
	<a v-bind:href="message">点我哦</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '#',
  }
})

v-bind:属性是用来修改节点属性的,你会发现在输入框里输入百度,点击超链接就会跳到百度.

7.隐藏或展示

<div id="app" >
	<input type="checkbox" v-model="isCheck">
	<div v-if="isCheck">呵呵呵呵</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isCheck: false,
  }
})
</script>

v-if的内会根据判断来展示或者隐藏

8.过滤器

<div id="app" >
	{{30 | myFilter}}
</div>

<script>
new Vue({
  el: '#app',
  filters:{
  	myFilter:function(value){
		return value * 100;
	}
  }
})

|号代表着管道,过滤器这里是将|前面的值作为后面过滤器的默认参数