vue实例中的事件和方法

v-html:被转译
v-text：不被转译
v-on:click=" 方法名"  新的模板指令，只绑定事件；绑定的事件是click
方法定义在：实例中的methods:{}中
new   Vue({
methods: {

example:给<div>绑定click事件
<body>
        <div id="root">
                <div v-on:click="handleClick">{{content}}</div> //v-on:可以简写成@ <div @click="handleClick">{{content}}</div>
        </div>

<script>
            new Vue({
                el:"#root",
                data: {
                    content:"hello"
                },
                methods:{
                    handleClick:function(){
                        this.content="world"
                    }
                }
            })
        </script>
    </body>
此时点击hello，它会自动变成world
<body>
        <div id="root">
                <div v-on:click="handleClick">{{content}}</div>
        </div>

<script>
            new Vue({
                el:"#root",
                data: {
                    content:"hello"
                },
                methods:{
                    handleClick:function(){
                        this.content="world"
                        alter(123)
                }
            })
        </script>
    </body>
弹出123弹窗

原文地址：https://www.cnblogs.com/Regina-o/p/9499411.html

时间： 2024-07-31 03:19:56

vue实例中的事件和方法的相关文章

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

Vue实例 中的常用配置项

创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外) 如: new Vue({//选项配置 el: '#app', components: { App }, template: '<App/>' }) 配置项一共可以分为六大类:数据.DOM.生命周期钩子.资源.组合.其他 一.数据 (1)data:Vue根实例或者当前组件上的数据对象,类型可

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

vue实例中的render函数

在runtime-only的vue版本中使用的就是render函数,运行依赖的一般都是runtime-omly的vue,compile版本占的体积太大不适合用作运行版本.因为缺少编译器,浏览器不能直接识别.vue文件,因此在开发时会把vue相关的代码编译成浏览器识别的js,在浏览器运行时便只需要,只用来运行的runtime-only版vuejs即可. 原文地址:https://www.cnblogs.com/chujunqiao/p/11624338.html

vue组件中click事件失效

最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

Vue bus的使用（兄弟｜非父子组件传值）--&gt;可以使用一个空的Vue实例作为中央事件总线new Vue()

1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) methods:{        handleClicks(){        this.bus.$emit('openMenu',true)       } } 父组建使用:  this.bus.$on("自定义事件名", msg => {}) mounted() {    this.bus

DataGrid中的事件和方法

事件: onLoadSuccess:数据加载成功的时候触发. onLoadError:在载入远程数据产生错误的时候触发. onClickCell:在用户点击一个单元格的时候触发. onDblClickCell:在用户双击一个单元格的时候触发. onSelect:在用户选择一行的时候触发,参数包括: index.选择的行的索引值,索引从0开始. row.对应于取消选择行的记录. onSelectAll:在用户选择所有行的时候触发. 方法: options:返回属性对象. load:加载和显示第一页

vue实例中的filters属性

filters过滤器可以通过管道符"|"绑定进属性或者差值表达式中 v-bind:value | filterName {{message | filterName}} 过滤器用于对数据进行有规律的变形,上述的代码用过滤器来给价格数据增加"￥"符号,和保留两位小数.通过 return 将过滤结果返回. 定义方法: filters:{ //ES6增强写法 等同showPrice:function(price){...} showPrice(price){ return

在Vue.js中引入jQuery的方法：

步骤一:首先先下载jQuery包 cnpm i jquery -D // 下载 jQuery包 步骤二:在webpack.config.js中配置jquery插件 步骤三:在要使用jQuery的组件页面引入jQuery import $ from 'jquery' //引入jquery