本文目录一览：
- 1、Vue 刷新页面时会触发事件吗
- 2、Vue如何触发对象里的
- 3、vue组件内数据变化，怎样触发/调用函数
- 4、第一次使用vue怎么才能自动触发事件
- 5、web前端vue实现插值文本和输出原始html
- 6、vue怎么触发元素的原生事件
Vue 刷新页面时会触发事件吗
一般使用 Vue 开发时，不需要摸 window.onload 这类 DOM 相关的 API，而是使用 Vue 封装的组件生命周期钩子：
export default {
// ...
// 在组件初始化时调用，可以简单理解为页面加载时
created () {
// 存在 localStorage 的缓存内容
if (localStorage.data) {
this.myData = JSON.parse(localStorage.data)
}
else {
// 页面无缓存内容时，初始化数据并写入缓存
this.initData()
}
}
// 在组件销毁前调用，但这并不能监听到页面退出的事件
beforeDestory () {
// 在此同样可对 localStorage 做一些处理
}
}
Vue如何触发对象里的
我就很好奇，写代码的来知道这儿问问题，你说说你还有比较继续写下去吗？
vue组件内数据变化，怎样触发/调用函数
port {getReferPage} from '../../vuex/getters.js'
export default {
vuex: {
getters: {
referPage: getReferPage,
loginName: state = state.loginName // 用户名。同时用来判断是否已经登录
},
actions: {
logout: ({dispatch}) = {
dispatch('SIGN_OUT')
}
}
},
methods: {
// 这里！希望被调用的函数，当用户登录后loginName会改变，希望跳转到其他页面
goIndex () {
if (this.loginName) {
if (this.referPage === window.location.href) {
this.$route.router.go('index')
} else {
window.history.go(-1)
}
}
}
}
第一次使用vue怎么才能自动触发事件
第一步，创建静态页面von.html，并引入vue.js关键的核心js文件，如下图所示：
第二步，在主题元素下插入div标签元素，并在其中插入一个input输入框和一个按钮，利用v-on指令绑定点击事件queryDate，如下图所示：
第三步，在div标签下方编写vue.js点击事件，事件是获取当前日期，如下图所示：
第四步，为了让输入框和按钮有间距，这里设置body元素样式，如下图所示：
第五步，预览该静态页面，然后点击按钮，发现输入框没有值，调试下发现错误，缺少jquery核心js文件，如下图所示：
第六步，引入jquery核心js文件后再次预览页面，并单击按钮，这时日期就显示在输入框内，如下图所示：
web前端vue实现插值文本和输出原始html
Vue.js
使用了基于
HTML
的模板语法，允许开发者声明式地将
DOM
绑定至底层
Vue
实例的数据。所有
Vue.js
的模板都是合法的
HTML
，所以能被遵循规范的浏览器和
HTML
解析器解析。
在vue里最常见的数据绑定是使用“Mustache”语法
(双大括号)
的文本插值：
spanMessage:
{{
value
}}/span
//
插值文本
无论何时，绑定的数据对象上
value
属性发生了改变，页面上都会响应的做出重新渲染。
或者有时候只是想更新一次，不想每次都更新数据了页面也重新渲染，可以通过
v-once指令也能实现一次性的更新：
span
v-once这个将不会改变:
{{
value
}}/span
//
value的值改变了一次后，第二次改变时就不会再重新渲染页面
有时候你插入的不是单单一个文本时，比如一个富文本的值时，它包含了各种文本值和各种原始的html的标签，要完整的显示到页面上，就得使用v-html的指令：
template
div
v-html="htmlvalue"/div
//
调用显示富文本，将会按照原始的html显示
/template
script
export
default
{
data(){
return{
htmlvalue:
'span
style="color:red;"the
should
be
red/span'
//
比如：这是一个富文本的值
}
}
}
/script
注意：你的站点上动态渲染的任意
HTML
可能会非常危险，因为它很容易导致XSS
攻击。请只对可信内容使用
HTML
插值，
绝不要
对用户提供的内容使用插值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue模板语法-插值详解
vue怎么触发元素的原生事件
DOM事件
在Vue中为DOM元素绑定事件的具体方法在文章中的 方法与事件处理器 章节，通过v-on指令或事件语法糖 @ 为DOM元素绑定事件。Vue解析组件模板后，在绑定更新 v-on 指令时会为DOM元素绑定事件(当然如果元素为 iframe ，会等到 iframe 加载完成后再为其绑定事件)。
Vue中为DOM元素绑定事件是采用DOM2级事件的处理方式，因为Vue服务的是IE9以上的现代浏览器，他们也都是支持DOM2级事件。因此下例中
实际上相当于
el.addEventListener('click', func)
所以 addEventListener 支持绑定的事件， v-on 指令也都支持。同样的理论上也可以解绑事件，虽然也有相应的 api ，但是Vue文档中并没有显示地告诉我们怎么做。
在代码中可以看到，每个 v-on 指令都有一个reset 方法， reset 方法是当指令所绑定方法发生改变时，重新绑定事件之前的解绑操作，我们可以利用这个 api 来解绑事件。因此如果需要解绑事件，我们可以遍历 vm._directives 找到相应该指令，进行解绑。
当然既然是采用DOM2级事件处理，也可以使用 removeEventListener 直接进行解绑，看这个 demo 。 执行解绑操作后 btn1 的确解绑成功了，但 btn2 没有解绑成功，这要说到 v-on 指令的 修饰符 ，见源码中对带有修饰符的 handler 的处理。顾名思义，修饰符修饰过的 handler 做了更多的事情，Vue的处理是包装原 handler 新的 handler 用于向DOM元素绑定，而解绑时仍然解绑原方法当然会失败。
当然这只是分析Vue的事件绑定原理，大多数情况下我们并不需要去解绑事件。合理的利用事件委托可以解决大部分由事件绑定引起的性能问题。
自定义事件
Vue自定义事件是为组件间通信设计，自定义事件提供了 $on、$off、$once、$emit、$broadcast、$dispatch 几个 api，非常简洁。
首先提两个vm的私有变量，vm._events 和 vm._eventCount。每个vm实例所有的自定义事件都将存储在 vm._events，而 vm._eventsCount 存储的是执行事件广播后子组件触发自定义事件处理程序的数量，这是为了事件广播优化而来的，如果 vm._eventsCount[event] 数量为零，当事件广播时则可断定子组件没有该事件的监听器，就没必要向子组件层层捕获该事件监听器了。
$on
注册一个自定义事件，注册事件很简单，首先将其挂载到该实例下
vm._events[event] = fn
然后是向上传播，更新各个组件的 _eventsCount。这里需要注意，我们可以通过 $on 为生命周期注册钩子， 点击 查看demo，但是生命周期不可冒泡和广播，所以需要更新 eventsCount 前需要过滤。 查看modifyListenerCount
$once
因为 $once 注册的事件是一次性的，执行完后卸载，所以其实 $once 调用 $on 来注册事件的函数是包装过的。
$off
理解了注册事件的流程(其实就是更改 _events 和 _eventsCount)那么卸载事件也就很清晰了。
但是$off支持三种卸载方式
1、 如果没有参数，则删除所有的事件监听器
遍历 _events，冒泡更新每个事件的 _eventsCount，清空 vm._events
2、 如果只提供了事件，则删除这个事件所有的监听器
冒泡更新每个事件的 _eventsCount，vm._events 中剔除该事件
3、 如果同时提供了事件与回调，则只删除这个回调
遍历 vm._events[event] 的事件处理方法，如果该事件处理方法和回调相同，则从 vm._events[event] 剔除该事件处理方法，并冒泡更新该事件的 _eventsCount
$emit
触发事件，直接遍历 vm._events[event] 的每个事件处理程序并执行。
$emit 返回 shouldPropagate，shouldPropagate 是一个布尔值，取决于父链上的是否存在该事件的监听器以及，事件处理程序返回的值。他决定 $dispatch 是否停止冒泡。
dispatch
派发事件。首先在实例上触发该事件，默认情况下将会停止冒泡传播，但如果 $emit 返回的 shouldPropagate 为 true，则该事件会继续沿父链向上传播，即在父组件继续向上派发事件。
broadcast
事件广播。深度优先遍历子组件，并执行各个子组件的监听器事件处理程序，在绑定和卸载自定义事件时会会每个组件维护一个 vm._eventsCount，而它的作用正是在深度遍历的时候给予提示，避免不必要的深度遍历。
通过自定义事件在组件之间的传播，我们可以利用它进行组件通信。组件通信在应用开发过程中是一个棘手的问题，因为它直接关系到整个应用的健壮和可维护程度，在开发大型项目中建议引入vuex，从应用架构的角度来考虑组件通信相比这种事件形式更容易维护，比如多个子组件都有派发事件与父组件进行通信，如果子组件派发事件不注意命名规范，出现命名重复情况，那么父组件监听器根本不知道这个事件是从哪里派发过来的以技如何处理，这是隐患之一。如果采用这种方式进行组件通信，那么必将导致子组件大量派发事件，那么父组件将要维护大量的事件监听器，如果时间久了，很容易忘记监听器和派发事件子组件的对应关系，这又增加了开发与维护成本。充斥着事件派发的组件维护成本也是一个容易留坑的地方。此外通过事件可以进行父子组件的通信，但兄弟组件的通信有需要增加不少开发成本。
组件的自定义事件
在上文分析DOM元素绑定事件中，我们用到这个例子
但是有时候会出现 v-on 为组件绑定事件的情况，如
上文中没有分析到，留在这里说，这里有两个明显区别
是组件而不是DOM元素
自定义事件而不是DOM事件
因此显然 addEventLisntener 不适用，而且Vue执行的也是和第一个例子完全不同的处理方式， 对其的处理在 registerComponentEvents 。它其实是为组件注册自定义事件。这里 v-on 指令绑定的结果是 demoVm._a href="" title="成都app制作开发公司events[myfunc] = [func] 以及更新 _eventsCount。
查看这个 demo 。
可见 v-on 指令既可为DOM元素绑定事件也可为组件绑定自定义事件。明白了这个，这个issuse 的原因也就很明了了。