vue的使用方法

❶ vue.js中怎样用onload事件

1、创建一个Vue.js文件，在template标签中插入div，div包裹无序列表和fusioncharts组件，其中无序列表子项元素绑定点击事件，如下图所示。

❷ vue 怎么创建组件及组件使用方法

使用vue.js构造modal组件的方法是使用 v-model 指令：
v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。
比如，多个勾选框，绑定到同一个数组：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})

❸ 使用vuejs时一个方法怎么访问另一个方法返回的数据

具体代码如下：

❹ 怎样使用Vue中字符串

vue.js 中的可以实现字符串操作
主要通过两个方法：
when()：配置路径和参数;
otherwise：配置其他的路径跳转，可以想成default。
when的第二个参数：
controller：对应路径的控制器函数，或者名称
controllerAs：给控制器起个别名
template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"
templateUrl：对应模板的路径，比如"src/xxx.html"
resolve： 这个参数着重说下，该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果。

❺ Vue新手，在组件中怎么使用v

var vue = new Vue({ el: 'body', data: { //负责数据 myData: {}, }, ready: function () { //vue初始化完执行函数 this.test(); }, methods: { //自定义 test: function () { alert('test'); } } });

❻ 如何正确使用Vue.js的组件

正确使用Vue.js的组件：
最基本一个vue结构如下：
var vue = new Vue({
el: 'body',
data: {
//这里负责数据
myData: {},
},
ready: function () {
//这里是vue初始化完成后执行的函数
this.test();
},
methods: {
//这里是自定义的方法
test: function () {
alert('test');
}
}
});

❼ vue如何动态调用方法

通常我们会在组件里的 template 属性定义模板，或者是在 *.vue 文件里的 template 标签里写模板。但是有时候会需要动态生成模板的需求，例如让用户自定义组件模板，或者设置组件的布局。
例如要做一个类 select 的组件，用户传入 options 数据，通过 value prop 获取选中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,

props: ['value','options']
})

如果此时需要增加一个 API 支持让用户自定义 option 部分的模板。此处用 slot 并不能解决问题。
通过 $options.template 修改
通过打印组件对象可以获得一个信息，在 $options 里定义了一个 template 属性，写在 template 标签里的模板，最终编译后也会在 $options.template 里。通过文档的生命周期 可以得知，在 created 的时候， 实例已经结束解析选项， 但是还没有开始 DOM 编译 也就是说，如果用户通过 prop 的数据我们可以获得，但是模板其实还没有渲染成 DOM。经过测试，在 created 修改 this.$options.template 是可以改变最终生成的 DOM 的，同时也能拿到 props 的内容。
那么我们可以修改下代码，使其支持自定义模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],

created() {
varoptionTpl =this.template

this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})

用户使用是就可以传入模板了
<x-select
:value.sync="value"
template="<span>标签: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>

可能存在的问题
我们知道 Vue 在内部帮我们做了许多优化，但是在这里可能会由于某些优化导致动态拼接的模板无法渲染成功。例如这里我们不使用 v-for 而是手工遍历 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)

this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`

这里会导致一个 BUG，如果一个页面有多个 x-select 组件，并且 options 长度不一样，会导致长的 options 的组件后面几个选项渲染不出来。究其原因是 Vue 会帮我们缓存模板编译结果。翻看代码可以找到 vue/src/instance/internal/lifecycle.js 里有做优化，同时提供的 _linkerCachable 本意是给 内联模板 使用。我们可以通过设置 this.$options._linkerCachable = false 达到我们的目的。
这样我们就可以开发让用户自定义布局的组件了，用户传入布局参数，通过手工拼接模板，设置了 _linkerCachable = false 也不会被缓存。
通过 $options.partials 动态添加 partial
使用 partials 也能达到添加自定义模板的目的，但是通常的做法是要全局注册 partial，这么做并不优雅。 vue-strap 就是这么做的。如果重名了会被覆盖（初次渲染不会，但是数据更新重新渲染 DOM 时就会被覆盖）。
通过文档我们知道可以在组件内部通过 partials 属性注册局部的 partial，因此自然而然也可以在 this.$options.partials 去动态添加了。

❽ vue的computed怎么使用

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用**计算属性**。

基础例子
<div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } })
这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。
console.log(vm.b) // -> 2 vm.a = 2 console.log(vm.b) // -> 3
你可以打开浏览器的控制台，修改 vm。vm.b 的值始终取决于 vm.a 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a，因此当 vm.a 发生改变时，依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。

计算属性 vs. $watch

Vue.js 提供了一个方法 $watch，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子：
<div id="demo">{{fullName}}</div> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val })
上面代码是命令式的重复的。跟计算属性对比：
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
这样更好，不是吗？

计算 setter

计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ...
现在在调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

❾ 如何使用vue的use方法使用element组件

1.打开cmd，运行：vue init webpack Vue-Demo

2.运行：cd Vue-Demo进入这一级

3.运行：npm install

4.运行：npm run dev

如果浏览器打开之后，没有加载出页面，说明本地的8080 端口被占用，需要修改一下配置文件 config/index.js

解释：1.将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路

径以 ' / ' 开头，那么在本地是无法找到对应文件。所以如果需要在本地打开打包后的文件，

就得修改文件路径。

2.将端口号改为不常用的端口。

项目新建完成。

二、引入Element

1.打开cmd，在当前目录中运行：npm i element-ui -S

2.src/main.js（红色的）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.config.proctionTip = false

/* eslint-disable no-new */
Vue.use(ElementUI)

new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

3.然后在.vue文件里就直接可以用了
例如：在src/components/Hello.vue做一下修改

❿ vue updated怎么使用

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：
updated: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been re-rendered})}