目次
スロット
通常のスロット、名前付きスロット、スコープ付きスロット
スロットを使用すると、子コンポーネントが呼び出されたときにテンプレートを子コンポーネントに渡すことができます。
<slot> 要素は、配布コンテンツをホストするための出口として機能します。名前のない <slot> アウトレットには、暗黙的な名前「default」が付けられます。
親テンプレート内のすべては親スコープでコンパイルされ、子テンプレート内のすべては子スコープでコンパイルされます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-a>
{
{msg}}
<!-- 父组件调用子组件提供了一个模版 -->
<div :title="msg">我是块级元素</div>
<img width="150px" src="../../HTML&CSS/images/ad10.jpg">
<!-- <header>头部内容</header>
<article>中间内容</article>
<footer>底部内容</footer> -->
<!-- 父组件调用子组件提供了具体的模版 -->
<!-- <template v-slot:header> -->
<!-- 绑定具名插槽时可以简写为#header -->
<template #header>
<!-- <template v-slot:header> -->
<h1>头部的内容</h1>
</template>
<template v-slot:article>
<p>我是文章内容</p>
<p>我是文章内容</p>
</template>
<template v-slot:footer>
<div>我是底部的内容</div>
</template>
<!-- 作用域插槽 -->
<template v-slot:default="scope">
<!-- <template v-slot="scope"> -->
<!-- <template slot-scope = "scope"> -->
<div>
{
{scope}}
</div>
</template>
</my-a>
</div>
<script>
let myA = {
template:`
<div>
myA组件
<slot name='default'>submit</slot>
<hr>
<header>
<slot name='header'></slot>
</header>
<article>
<slot name='article'></slot>
</article>
<footer>
<slot name='footer'></slot>
</footer>
<slot v-bind:subMsg='subMsg'></slot>
</div>
`,
data(){
return{
msgA:'我是子组件',
subMsg:'我是子组件的属性'
}
}
}
new Vue({
components:{
'my-a':myA
},
el:'#app',
data:{
msg:'我是父组件中msg',
},
methods:{},
})
</script>
</body>
</html> 
カスタム命令
指令
Vue の多くの命令は v- で呼び出されます。ただし、Vue が提供する命令がニーズを満たしていない場合があり、その場合は命令をカスタマイズする必要があります。
ディレクティブを使用すると、通常の DOM 要素に対して低レベルの操作を実行できます。グローバルまたはローカルに登録可能
グローバル登録
Vue.ディレクティブの使用
部分登録
新しいオプション ディレクティブを Vue インスタンスまたはコンポーネントに追加する
フック関数
フック関数は、命令のライフサイクルの重要な瞬間にコードを追加できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="app">
<input v-focus="msg" type="text" >
{
{msg}}
<input v-myshow="msg" type="text" >
</div>
<script>
Vue.directive('focus',{
inserted(el){
el.focus()
},
bind(el,binding,vnode){
el.style.backgroundColor=binding.value
}
})
new Vue({
directives:{
'myshow':{
inserted(el){
},
bind(el,binding,vnode){
el.value=binding.value;
}
}
},
el:"#app",
data:{
msg:'red'
},
methods:{}
})
</script>
</body>
</html>renderレンダリング関数
Vue では、ほとんどの場合、テンプレートを使用して HTML を作成することをお勧めします。ただし、JavaScript の完全なプログラミング機能が本当に必要なシナリオもいくつかあります。現時点では、テンプレートよりもコンパイラに近いレンダリング関数を使用できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-a :friuts="friuts">
列表
</my-a>
</div>
<script>
let myA={
props:{
friuts:{
type:Array,
}
},
beforeMount(){
alert('beforeMount')
},
mounted(){
alert('mounted')
},
render(h){
alert('2222')
let lis=this.friuts.map(item=>{
return h('li',{},item)
})
return h('ul',{},[this.$slots.default,...lis])
},
// template:`
// <div>
// <ul>
// <li v-for='item in friuts'>{
{item}}</li>
// </ul>
// </div>
// `,
data(){
return {
}
}
}
new Vue({
components:{
'my-a':myA
},
el:"#app",
data:{
friuts:['苹果','香蕉','菠萝']
},
methods:{}
})
</script>
</body>
</html>フィルター
Vue.js では、一般的なテキストの書式設定に使用できるカスタム フィルターが可能です。フィルターは、二重中括弧補間と v-bind式の2 つの場所で使用できます(後者は 2.1.0 以降でサポートされます)。
|フィルタは、 「パイプ」記号で示されるJavaScript 式の最後に追加する必要があります。<!-- 二重中括弧内 --> { { message | filterMethod }} <!-- `v-bind` 内 -->
//首先引入 `moment`第三方库，再进行接下来的操作。引入moment仅供实现功能，与过滤器没有关系。
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/af.js"></script>
<script>
// 全局注册
Vue.filter("fmtDate_global", function (date) {
return moment(date).format("YYYY-MM-DD HH:mm:ss");
// 或者return自己编写的时间处理函数
})
new Vue({...})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用过滤器 -->
<div>{
{ new Date() | fmtDate_global}}</div>
<div :title="new Date() | fmtDate_global">鼠标悬停查看时间</div>
</div>
<script>
// 全局注册过滤器
Vue.filter("fmtDate_global", function (date) {
return moment(date).format("YYYY-MM-DD HH:mm:ss");
})
new Vue({
el: '#app',
})
</script>
</body>
</html>プラグイン
プラグイン
プラグインは、Vue にグローバル機能を追加するためによく使用されます。Vue.js プラグインはインストール メソッドを公開する必要があります。このメソッドの最初のパラメーターは Vue コンストラクターで、2 番目のパラメーターはオプションのオプション オブジェクトです。
MyPlugin.install = function (Vue, options) { // 1. グローバル メソッドまたはプロパティを追加します Vue.myGlobalMethod = function () { // Logic... } // 2. グローバル リソースを追加します Vue.directive(' my- directive', { binding (el, binding, vnode, oldVnode) { // Logic... } ... }) // 3. コンポーネントのオプションを挿入する Vue.mixin({ created: function () { // Logic. .. } ... }) // 4. インスタンス メソッドを追加します Vue.prototype.$myMethod = function (methodOptions) { // Logic... } }グローバル メソッド経由でプラグインを使用します
Vue.use()。new Vue()これは、アプリケーションを開始するために呼び出しを行う前に行う必要があります。// `MyPlugin.install(Vue)` を呼び出します Vue.use(MyPlugin) new Vue({ // ...コンポーネント オプション })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="app">
{
{time | fmtTime}}
<input type="text" v-focus>
</div>
<script>
let MyPlugin = {
install(Vue, options) {
Vue.filter('fmtTime', (val) => {
return moment(val).format('YYYY--MM-DD')
}),
Vue.prototype.$message=function(val){
alert(val)
},
Vue.directive('focus', {
inserted(el) {
el.focus()
},
bind(el, binding, vnode) {
el.style.backgroundColor = binding.value
}
})
},
};
Vue.use(MyPlugin)
new Vue({
el: "#app",
data: {
time: new Date().getTime()
},
created(){
this.$message('请求成功')
},
methods: {}
})
</script>
</body>
</html>