2021-7-6 VUE笔记

v-cloak：使用的display：none；

直到编译完成后开始显示；

v-text和插值表达式，非必要响应式用v-text会比较好，使用插值表达式要加上v-cloak;

v-html：不推荐使用，动态渲染网页容易导致xss攻击；

本网站内部使用，不应该在来自使用外部数据或者跨域使用；

v-pre：不进行编译，即类似于插值表达式不执行，返回初始状态{{message}}

v-once：只赋值一次，只渲染一次

Vue的v-model使用的是MVVM模式：view和model通过viewmodel进行交互，view通过Data Bindings绑定model

model通过Dom Listeners监听view的值

v-on：事件绑定，可用@表示；

传参时用$event可获取当前使用的控件参数,$event必须放在最后面,相当于选择器例如（event.target.TagName)或（event.target.innerHTML）；

不传参时默认调用$event做为第一个参数；

事件修饰符：.stop:阻止冒泡（传统阻止冒泡event.stopPropagetion()）：冒泡是指由小到大触发标签或者方法

.prevent:阻止默认行为：指标签默认会产生的行为

按键事件修饰符示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="name" @keyup.delete="del"> 
  <input type="text" v-model="pwd" @keyup.enter="handle"  @keyup.delete="del"> 
  <input type="button" value="提交" @click="handle">
</div>
<script>
new Vue({
  el: '#app',
  data: {
    name:'',
    pwd:''
  },
  methods:{
    handle:function(){
     console.log(this.name,this.pwd);
    },
    del:function(){
      this.name='';
      this.pwd='';
    }
  }
})
</script>
</body>
</html>

View Code

获取按键修饰符的编号，以使用keycode

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text" @keyup="handle($event)">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    code:0
  },
  methods:{
    handle:function(event){
     console.log(event.keyCode);
    }
  }
})
</script>
</body>
</html>

View Code

Vue.config.keyCodes.a=65;

上方代码可直接通过keyup.a调用对应的按键

*parseInt可强转string类型为int

v-bind:可以用：代替

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" @click="handle()" value="改变">
  <a v-bind:href="url">{{name}}</a>
</div>

<script>
Vue.config.keyCodes.a=65;
new Vue({
  el: '#app',
  data: {
    name:'必应',
    url:'https://cn.bing.com/?mkt=zh-CN'
  },
  methods:{
    handle:function(){
     this.name="百度";
     this.url="https:\\www.baidu.com";
    }
  }
})
</script>
</body>
</html>

View Code

v-model：实现原理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text"  :value="name" @input="handle">
  <input type="text"  :value="name" @input="handle">
</div>

<script>
Vue.config.keyCodes.a=65;
new Vue({
  el: '#app',
  data: {
     name:'陌生人，你好鸭'
  },
  methods:{
    handle:function(event){
     this.name=event.target.value;
    }
  }
})
</script>
</body>
</html>

View Code

posted @ 2021-07-05 10:34 月长生阅读(45) 评论(0) 收藏举报

刷新页面返回顶部

月长生

2021-7-6 VUE笔记

公告