zoukankan      html  css  js  c++  java
  • vue踩坑记

    vue踩坑记

    易错点

    语法好难啊qwq

    • 不要把'data'写成'date'
    • 在v-html/v-bind中使用vue变量时不需要加变量名
    • 在非vue事件中使用vue中变量时需要加变量名
    正确
    <div id="vue">
    	<button onclick="vm.ColorRed=vm.ColorRed^1">gg</button>
    	<div v-html="site" v-bind:class="ColorRed ? MyClass : TwoClass"></div>
    </div>
    错误
    <div id="vue">
    	<button onclick="ColorRed=ColorRed^1">gg</button>
    	<div v-html="site" v-bind:class="ColorRed ? MyClass : TwoClass"></div>
    </div>
    
    • vue结构内赋值使用:,不要写成=
    data : {
    	answer: "123",
    	inputval: "1234",
    },
    
    • 使用v-html,v-bind, v-modelv前缀赋值时使用=
    <div id="vue_work_area">
    	<input v-model="inputval">
    	<button v-on:click="work">print</button>
    	<p>{{answer}}</p>
    </div>
    
    • component注册时Vue首字母必须大写
    Vue.component('attack',{
    	template: '<h1>attack caiji</h1>'
    });
    
    • 在methods内部调用变量名时需要在前面加上this.

    methods与computed

    computed与methods的区别在于:使用computed的计算时,只有当对象发生改变时才会重新计算,而methods没有缓存

    示例链接

    <div id="vue">
    	<input v-model="str"> 
    	<p>{{ans()}}</p> <!--这里的ans是函数,需要加括号-->
    	<p>{{reans}}</p>
    </div>
    <script>
    	var vm = new Vue({
    		el: '#vue',
    		data: {
    			str: "",
    		},
    		methods: {
    			ans: function() {
    				return this.str.split('').reverse().join('');
    			}
    		},
    		computed: {
    			reans: function() {
    				return this.str.split('').reverse().join('');
    			}
    		},
    	})
    </script>
    
  • 相关阅读:
    C#:将子Form加入父Form中
    C#:简单线程样例
    C#:实现接口中定义的事件
    easyui设置界面的高度自适应
    JQuery
    vim常用命令(iOS)
    Linux的IO性能监控工具iostat详解
    php多线程抓取信息测试例子
    使用Gitosis搭建Git服务器
    CentOS 6.4 搭建git 服务器
  • 原文地址:https://www.cnblogs.com/arkiflow/p/10775597.html
Copyright © 2011-2022 走看看