文章已经发布在个人博客，不断进行更新欢迎收藏订阅，或者提出批评意见。
有一些方法函数可能并不经常使用，但是遇到特定场景需要的时候却想不起来，所以需要把平时碰到的这些方法和函数进行备案，在需要的时候可以查询。
字符串反转
Todos
复选表单
动态选项，用 v-for 渲染
指令实例属性
对象字面量
MVVM 数据绑定
利用v-if或者v-show进行条件判定
Directive
动态组件
使用script或template标签
字符串反转
reverseMessage: function () {
this.msg = this.msg.split('').reverse().join('')
}Todos
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="(todo,index) in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo(index)">X</button>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<!--<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>-->
<script>
new Vue({
data: {
newTodo: '',
todos: [
{text: 'Add some todos'}
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim();
if (text) {
this.todos.push({text: text});
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
}).$mount('#app')
</script>复选表单
<div id="app">
<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}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
checkedNames:[]
}
})
</script>动态选项，用 v-for 渲染
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<br>
<span>Selected: {{selected}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
selected:'A',
options:[
{text:'One',value:'A'},
{text:'Two',value:'B'},
{text:'Three',value:'C'}
]
}
})
</script>指令实例属性
<div id="app">
<div id="demo" v-demo:hello.a.b="msg"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.directive('demo', {
bind() {
document.write('demo bound! This is a test dialog.')
},
update(value) {
this.el.innerHTML =
`name - ` + this.name + `<br>` +
`expression - ` + this.expression + `<br>` +
`argument - ` + this.arg + `<br>` +
`modifiers - ` + JSON.stringify(this.modifiers) + `<br>` +
`value - ` + value
}
});
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js!'
}
})
</script>对象字面量
<div id="app">
<div v-demo="styleObj"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.directive('demo', () => {
console.log(styleObj.color);
console.log(styleObj.text)
});
var styleObj = {
color: 'red',
text: 'Hello!'
};
var vm = new Vue({
el: '#app',
data: {
styleObj: styleObj
}
})
</script>MVVM 数据绑定
<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 双向绑定 -->
<input v-model="msg"> 利用v-if或者v-show进行条件判定
<div id="app">
<section v-if="loginStatus">
输入您的姓名:<input type="text" v-model="name">
<button @click="say">欢迎点击</button>
<button @click="switchLoginStatus">退出登录</button>
</section>
<section v-if="!loginStatus">
登录用户:<input type="text">
登录密码:<input type="password">
<button @click="switchLoginStatus">登录</button>
</section>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
var vm = new Vue({
data: {
name: '_Appian',
loginStatus: true
},
methods: {
say: function () {
alert('欢迎' + this.name)
},
switchLoginStatus: function () {
this.loginStatus = !this.loginStatus;
}
}
}).$mount('#app')
</script>Directive
对 Todo List 输入的内容进行校验（表单校验）。基本逻辑就在在
bind阶段的时候就绑定事件，然后根据update时候传入的 minlength 值来进行判断。
Directive 基本结构如下：
Vue.directive("minlength", {
bind: function () {
},
update: function (value) {
},
unbind: function () {
}
});Vue.directive("minlength", {
bind: function () {
var self = this,
el = this.el;
el.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
if (el.value.length < self.minlength) {
e.preventDefault();
}
}
});
var submit = el.parentNode.querySelector("button,[type='submit']");
submit.disabled = true;
el.addEventListener("keyup", function (e) {
submit.disabled = (el.value.length < self.minlength);
})
},
update: function (value) {
this.minlength = parseInt(value);
},
unbind: function () {
}
});动态组件
<div id="app">
<button id="home">Home</button>
<button id="posts">Posts</button>
<button id="archive">Archive</button>
<br>
<component :is="currentView"></component>
</div>var vm = new Vue({
data: {
currentView: "home"
},
components: {
home: {
template: `<div>Home</div>`
},
posts: {
template: `<div>Posts</div>`
},
archive: {
template: `<div>Archive</div>`
}
}
}).$mount('#app');
document.getElementById('home').onclick = function () {
vm.currentView = "home";
};
document.getElementById('posts').onclick = function () {
vm.currentView = "posts";
};
document.getElementById('archive').onclick = function () {
vm.currentView = "archive";
};使用script或template标签
使用script标签
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>This is a test component.</div>
</script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('my-component', {
template: `#myComponent`
});
new Vue({
el: "#app"
});
</script>使用template标签
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>This is a test component.</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('my-component', {
template: `#myComponent`
});
new Vue({
el: "#app"
});
</script>注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。