Vue:vue相关笔记

2019独角兽企业重金招聘Python工程师标准>>>

一、引入

通过<script src="./vue.js"></script>引入，也可以引入在线的，我这个是从网上复制的代码，该名称为vue.js

二、使用

基本：通过new Vue({})的方式创建vue，使用el指定div的标签，使用{{*}}的方式调用data的数据

	<div id="root" >{{message}}</div>

	<script>
		new Vue({
			el: "#root",
			data: {
				message: "hello vue!"
			}
		})
	</script>
	</body>

三、标签

v-text  表示引入全部文本
v-html  可以转义文本中的标签
v-on:click  表示绑定点击事件，缩写@click
v-bind:title  表示title的值的数据与data中标签的数据进行了绑定，缩写为:title
v-model 表示双向数据绑定，即修改一个值，所有引用这个值的地方也会跟着改变

v-on:click的使用，需要与mothods方法结合使用，例：
<div id = "root" v-onclick="handleClick">aaa</div>
<script>
  new Vue({
    el:"#root",
    methods: {
       handleClick: function() {
          alert(aaa);
       }
    }
  })
</script>

v-bind:title的使用，表示属性绑定，例：
<div id = "root" v-bind:title="'hello，' + title">hello world!</div>
<script>
  new Vue({
    el:"#root",
    data: {
      title:"this is title!"
    }
  })
</script>

v-model的使用，表示双向属性绑定，例：
<div id = "root">
<input v-model="title" />
<div>{{title}}</div>
</div>
<script>
  new Vue({
    el:"#root",
    data: {
      title:"this is title!"
    }
  })
</script>

四、vue中的标签

el  表示new Vue的使用对象
data  key-value的键值对的方式来对应表示数据
computed  计算数值
watch   监听器


computed标签，用于计算最终结果并显示
watch标签，用于监听某一个值的变化
例：
<div id="root">
  值一：<input v-model="firstValue" />
  值二：<input v-model="secondValue" />
  和：<div>{{finalValue}}</div>
  变化次数：<div>{{count}}</div>
</div>

<script>
  new Vue({
    el:"#root",
    data: {
      firstValue:'',
      secondeValue:''
      count: 0
    },
    computed: {
      finalValue: function() {
        return this.firstValue + this.sencondValue
      }
    },
    wacth: {
        count: function() {
          this.count ++
        }
    }
  })
</script>

五、v-if v-show v-for指令的使用

v-if  当内部的值位false的时候，是将该标签从dom中删除，一次性修改时可以使用
v-show  当内部的值为false的时候，是将display设置位none，多次频繁展示/隐藏时可以使用
v-for  循环展示数据

v-if和v-show的展示样式相同，具体不同参考上方介绍，例：
<div id="root">
 <div v-if="show">hello world</div>
 <button @click="handleClick">button</button>
</div>

<script>
  new Vue({
    el:"#root",
    data: {
      show:true
    }，
    methods: {
      handleClick: function() {
        this.show = !this.show;
      }
    }
  })
</script>

v-for是用于循环展示列表，例：
<div id="root">
  <ul>
    <li v-for="item of list">{{item}}</li>
    <li v-for="(item, index) of list" :key="index">{{item}}</li>
  </ul>
</div>

<script>
  new Vue({
    el:"#root",
    data: {
      list: [1,2,3]
    }
  })
</script>

六、todolist组件

组件分为全局组件和局部组件

全局组件，例：
<todo-item></todo-item>
<script>
  Vue.component('todo-item', {
    props: ['content']  这里用于接收参数
    template: '<li>{{content}}</li>'
  })
</script>

局部组件，例：
<todo-item></todo-item>
<script>
  var todoItem = {
    template: '<li>item</li>'
  }
  new Vue({
    el: "#root",
    components: {
      'todo-item': todoItem
    }
  })
</script>

七、组件与实例

组件中也可以像Vue实例中那样添加事件和方法

<todo-item></todo-item>
<script>
  Vue.component('todo-item', {
    props: ['content']  这里用于接收参数
    template: '<li @click="clickMethod">{{content}}</li>',
    mothods: {
      clickMethod: function() {
        alert("aaa")
      }
    }
  })
</script>

 

第一篇：本博客为vue相关的第一篇博客

下一篇：https://my.oschina.net/u/2430231/blog/3017541

转载于:https://my.oschina.net/u/2430231/blog/3016308