甘肃龙网

  1. 首页 > 生活 > >

day01 Vue ElementUI Axios 前后端案例 之Vue( 二 )

生活百科绑定


动态這染的HTML容易导致XSS攻击，只对可信内容使用v-html插值，绝不要对用户提供的内容使用插值 。
v-bind
{{}}、v-text、v-html语法不能作用在HTML标签的属性上：
v-bind指令可以用于响应式地更新HTML标签的属性 。
Hello Vue

src="http://www.kingceram.com/post/js/vue.js">>let vm = new Vue({el: '#app', //elementdata: {url: 'http://www.baidu.com',content: '百度',disabled: false}})
v-on
v-on 指令，它用于监听 DOM 事件：
Hello Vue
{{count}}


src="http://www.kingceram.com/post/js/vue.js">>let vm=new Vue({el: '#app', data: {count:0,disabled:false},methods : {funCount :function(){if(this.$data.count==10){this.$data.disabled=true;alert('')}else{this.count+=1;}}}})//console.log(vm.$data.count)
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联语句中调用方法：
事件冒泡和捕获
冒泡 这个按钮在上的 它会将父容器及之上的事件接连触发
Hello Vue>div {width: 300px;height: 300px;background-color: aqua;}button {margin-top: 100px;margin-left: 100px;}
>// 冒泡document.querySelector('div').addEventListener('click',function () {alert('div')},false);document.querySelector('button').addEventListener('click',function () {alert('button')},false);// 捕获// document.querySelector('div').addEventListener('click',function () {//alert('div')// },true);// document.querySelector('button').addEventListener('click',function () {//alert('button')// },true);
默认就是冒泡
捕获改为true 则是相反的
事件修饰符
在事件处理程序中调用event.或event.(是非常常见的需求 。
为了解决这个问题，Vue.js为v-on提供了事件修饰符 。修饰符是由点开头的指令后缀来表示的 。
.stop - 阻止冒泡
. - 阻止默认事件
. - 阻止捕获
.self - 只监听触发该元素及子元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
. - 中间滚轮事件
Hello Vuesrc="http://www.kingceram.com/post/js/vue.js">>let vm = new Vue({el: '#app',methods: {fun: function () {alert('aaa')}},})
a标签默认有跳转事件 加上@click. 就不跳转了 。而且先触发@click里面的事件
Hello Vue>div {width: 300px;height: 300px;background-color: aqua;}button {margin-top: 100px;margin-left: 100px;}