Vue:vue相关笔记

深藏阁楼爱情的钟 2022-01-13 18:01 247阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

一、引入

通过<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

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/d2da68577e224866b2cb3faa2f2fe9ab.png