- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
语法要求:watch里面的函数名必须跟date里面属性名一致
<body>
<div id="vueBox">
<p>{{num}}</p>
<button v-on:click="add">添加</button>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
num: 0
},
methods: {
add: function() {
this.num++;
}
},
watch: {
num: function(newValue, oldValue) {
console.log("新值:"+newValue);
console.log("旧值:"+oldValue);
}
}
})
</script>
**作用:**相同的部分提取出来,通过包含技术,实现避免重复内容的编写 – 即共享代码
语法特点:
你好
按钮"
Vue.component("my-tag",{
template: "<div></div>" --字符串
template:`<div></div>` --模板字符串
})
全局组件内部可以引用全局组件
特点:组件一旦全局注册,即使整个项目没有使用该组件,依然会随者Vue的加载而加载组件复用时,是相互独立,相同的组件间不会受彼此影响
<body>
<div id="vueBox">
<my_component></my_component>
<my_component></my_component>
</div>
</body>
<script type="text/javascript">
Vue.component("my_component", {
template: "<div><p>数字:{{num}}</p><button v-on:click='add'>添加</button></div>",
data() {
return {
num:0
}
},
methods: {
add: function() {
this.num++;
}
}
})
var vue = new Vue({
el: "#vueBox"
})
</script>
局部组件内部不可以引用局部组件
特点: 对于不频繁使用的组件,则将其定义在Vue实例里面 - 成为Vue实例一个子集
<body>
<div id="vueBox">
<my_component></my_component>
<my_component></my_component>
</div>
</body>
<script type="text/javascript">
const myComponent = {
template: "<div><p>数字:{{num}}</p><button v-on:click='add'>添加</button></div>",
data() {
return {
num:0
}
},
methods: {
add: function() {
this.num++;
}
}
}
var vue = new Vue({
el: "#vueBox",
components: {
my_component: myComponent
}
})
</script>
如果一个单页面以组件形式构成,则能刻画成一颗多节点的树
注意父组件传递的值只会起效第一次,子组件改变属性值并不会影响父组件,父组件属性值改变并不影响子组件属性值
v-bind:子属性=“父属性” 等价于 :子属性="父属性"
<body>
<div id="vueBox">
<my_component v-bind:content="conten1"></my_component>
<my_component :content="content1"></my_component>
<button v-on:click="add">父组件按钮增加</button>
</div>
</body>
<script type="text/javascript">
Vue.component("my_component", {
template: "<div><p>数字:{{content}}</p><button v-on:click='chang'>字组件按钮增加</button></div>",
props: ["content"],
methods: {
chang: function() {
this.content++
}
}
})
var vue = new Vue({
el: "#vueBox",
data: {
content1: 10
},
methods: {
add: function(){
this.content1++
}
}
})
</script>
执行流程
语法注意
<body>
<div id="vueBox">
<p>{{num}}</p>
<my-tag @my-add-event="fatherAdd($event)"></my-tag>
</div>
</body>
<script type="text/javascript">
Vue.component("my-tag", {
template: "<p><button v-on:click='add'>数字增加</button></p>",
methods: {
add: function() {
this.$emit("my-add-event", 10)
}
}
})
var vue = new Vue({
el: "#vueBox",
data: {
num: 1
},
methods: {
fatherAdd: function(val) {
this.num = this.num +val;
}
}
})
</script>
<body>
<div id="vueBox">
<my-tag title="父组件传来的字面量"></my-tag>
<my-tag></my-tag>
</div>
</body>
<script type="text/javascript">
Vue.component("my-tag", {
template: "<p>{{msg}}--{{title}}</p>",
data: function(){
return {msg: '组件的内置数据'}
},
props: {
title: {
type: String,
default: "预设的值"
}
}
})
var vue = new Vue({
el: "#vueBox",
data: {
nums: [1,2,3,4]
}
})
</script>
注意:
<body>
<div id="vueBox">
<my-tag msg1="200" :msg2="200"></my-tag>
</div>
</body>
<script type="text/javascript">
Vue.component("my-tag", {
template: "<p>{{typeof msg1}} -- {{typeof msg2 }}</p>",
props: ["msg1", "msg2"]
})
var vue = new Vue({
el: "#vueBox",
data: {
}
})
</script>
数据传递原则: 单向数据流原则,尽量少的子组件改变父组件的数据
<body>
<div id="vueBox">
<p>父组件num:{{num}}</p>
<my_component :num1="num" @add="add" @reduce="reduce" ></my_component>
</div>
</body>
<script type="text/javascript">
Vue.component("my_component", {
template: "<div><p>子组件num1:{{num1}}</p><button v-on:click='add'>增加</button><button v-on:click='reduce'>减少</button></div>",
props: ["num1"],
methods: {
add: function() {
this.$emit("add");
},
reduce: function() {
this.$emit("reduce");
}
}
})
var vue = new Vue({
el: "#vueBox",
data: {
num : 0
},
methods: {
add: function() {
this.num++;
},
reduce: function() {
this.num--;
}
}
})
</script>
利用中间媒介(事件中心)进行传递
利用一个Vue实例进行做组件间的信息传递
<div id="vueBox">
<button v-on:click="destoryMsg">销魂两兄弟组件的信息交互</button>
<my-tag1></my-tag1>
<my-tag2></my-tag2>
</div>
</body>
<script type="text/javascript">
// 信息中心 - 媒介
var msgCenter = new Vue();
Vue.component("my-tag1", {
template: "<div><p>tag1的num:{{num}}</p><button v-on:click='handle'>数字增加</button></div>",
data: function () {
return {
num: 0
}
},
methods: {
handle: function () {
// 向信息中心发送tag1-event事件
msgCenter.$emit("tag1-event", 20)
}
},
mounted: function () {
// 信息中心在这里进行执行监听tag2-event事件
msgCenter.$on("tag2-event", (val) => {
this.num = this.num + val;
})
}
})
Vue.component("my-tag2", {
template: "<div><p>tag2的num:{{num}}</p><button v-on:click='handle'>数字增加</button></div>",
data: function () {
return {
num: 0
}
},
methods: {
handle: function () {
msgCenter.$emit("tag2-event", 10)
}
},
mounted: function () {
msgCenter.$on("tag1-event", (val) => {
this.num = this.num + val;
})
}
})
var vue = new Vue({
el: "#vueBox",
methods: {
destoryMsg: function () {
msgCenter.$off("tag1-event");
msgCenter.$off("tag2-event");
}
}
})
</script>
父组件向子组件传递内容
如果没有标签则自定义组件插入的内容不会显示出来
<head>
<meta charset="UTF-8">
<title>Vue测试</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="vueBox">
<my-component><a>你很丑</a></my-component>
<my-component><a>太矮了</a></my-component>
<my-component></my-component>
</div>
</body>
<script type="text/javascript">
Vue.component("my-component",{
template: `
<div>
<span style="color:red">错误提示:</span>
<slot><a>默认内容</a></slot>
</div>`,
})
var vue = new Vue({
el: "#vueBox"
})
</script>
模版上使用name进行插槽命名,使用slot进行标记插在哪一个槽上
<body>
<div id="vueBox">
<my-component>
<span>填入无名插槽</span>
<span slot="name1">填入name1插槽</span>
<span slot="name2">填入name2无名插槽</span>
</my-component>
</div>
</body>
<script type="text/javascript">
Vue.component("my-component",{
template: `
<div>
<span style="color:red">错误提示:</span><slot><a>默认内容无名插槽</a></slot>
<br/>
<span style="color:red">错误提示:</span><slot name="name1"></slot>
<br/>
<span style="color:red">错误提示:</span><slot name="name2"></slot>
<br/>
</div>`,
})
var vue = new Vue({
el: "#vueBox"
})
</script>
<body>
<div id="vueBox">
<my-component>
<template>
<span>填入无名插槽</span>
</template>
<template slot="name1">
<span >填入name1插槽</span>
</template>
<template slot="name2">
<span >填入name2无名插槽</span>
</template>
</my-component>
</div>
</body>
<script type="text/javascript">
Vue.component("my-component",{
template: `
<div>
<span style="color:red">错误提示:</span><slot><a>默认内容无名插槽</a></slot>
<br/>
<span style="color:red">错误提示:</span><slot name="name1"></slot>
<br/>
<span style="color:red">错误提示:</span><slot name="name2"></slot>
<br/>
</div>`,
})
var vue = new Vue({
el: "#vueBox"
})
</script>
父组件对子组件内容进行加工处理
下列示例的数据流动图片
vue实例的students数据全局组件的studentsmsg属性args属性
<body>
<div id="vueBox" >
<my-component v-bind:students="students">
<template slot-scope="args">
<span v-if="args.msg.id == 2" style="color:red">{{args.msg.name}}</span>
<span v-else>{{args.msg.name}}</span>
</template>
</my-component>
</div>
</body>
<script type="text/javascript">
Vue.component("my-component",{
template: `
<ul>
<li v-for="student in students"><slot :msg="student"></slot></li>
</ul>
`,
props:["students"]
})
var vue = new Vue({
el: "#vueBox",
data: {
students: [{
id: 1,
name: 'lrc'
},{
id: 2,
name: 'lcj'
},{
id: 3,
name: 'yxx'
}]
}
})
</script>
在 Elastic Watcher 的官方网站上,他们说 Watcher 是 Elasticsearch 的插件,可根据数据的变化提供警报和通知 可以通过定期 Elasticsearch 查询 识别相
我有一个配置了 watch OS1 架构的项目。现在我想在同一个项目中只支持 watch OS2 架构。因此,为了在现有项目中仅配置 watch OS2,我删除了 watch OS1 的所有目标,包括
我想从我的 xcode 项目生成一个 .watchface 文件。有什么方法可以从默认 watch 应用程序之外创建 .watchface 文件吗? 我找到了一个网站Facer ,他们提供定制选项并从
我的手机在 Xcode 中被列为 ineligible target 并在旁边显示(没有配对的 Apple Watch)。 我的 Apple Watch 在 iOS 设备下注册。我可以看到UDID。
最近我在 gulp watch 上遇到错误,我用谷歌搜索并试图解决这个问题,但没有成功。有谁知 Prop 体原因吗? 应用程序基于 AngulerJs 1.3 并运行在 npm 5.7.1/node
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
我有一个并发症,可能需要每 5 分钟更新一次。这很容易总结为每天 120 次更新。有没有办法只在用户唤醒 watch 时更新? 最佳答案 我认为您的问题的答案是否,目前没有办法只在用户唤醒 watch
有没有人有苹果 watch 在没有任何额外应用程序或集成设备的情况下生成的数据类型列表?它必须是 these 的子集,但我无法弄清楚哪些 最佳答案 数据类型的确切列表取决于型号,但最新的 Apple
在我的苹果 watch 扩展中,我想使用长按手势功能。是否有任何 api 等效于 UILongPressGestureRecognizer。我的要求是,在 watch 扩展上,我有表格想要长按单元格,
我一直在互联网上关注很多教程来学习如何设置并发症。按预期设置并发症我没有问题。 直到初始时间线条目过期。 12 小时后,我不知道如何更新它以保持并发症的存在。我将在下面分享我拥有的所有内容,希望有人可
今天几乎是偶然的,我偶然发现了索尼正在开放固件开发并在他们自己的引擎盖下创建一个项目的公告: http://developer.sonymobile.com/services/open-smartwa
目前用于语音听写的方法并不忙。使用的方法是“presentTextInputControllerWithSuggestions”。它遵循单个语音输入“VoiceInputButton -> Speak
我在获取 gulp-watch 时遇到问题或 gulp-watch-less在遵循记录的示例后触发。我最初解决的问题是lazypipe(此处未显示),但在我看来,我在使用插件的方式上做错了。这是我的简
我正在使用 Xcode 开发 Apple Watch 应用程序。我想在屏幕的左上角放置一些文本,与列出时间的位置相邻。 当我将标签向上拖动到屏幕的一部分时,它会自动向下对齐。 我看到大多数 Apple
我似乎找不到在哪里设置我的 Apple Watch 应用程序的产品名称。我确实看到了产品名称选项,但更新它没有任何作用。也看不到文档中的任何内容 最佳答案 为了让您的应用程序名称在 iPhone 上的
只是一个简单的问题。 选项和实例方法有什么区别? 基于 watch 示例,我们可以将 watcher 实现为一个选项( https://v3.vuejs.org/api/options-data.ht
是否可以设置count而不会触发 $watch打回来? $scope.count=1; $scope.$watch('count',function(){...}); 谢谢。 最佳答案 您可以使用 s
对于 sass 目前我正在使用 sass --watch path1:path2 将 scss 文件编译为 css 但我什至发现 compass watch path1:path2 还。这两款 wat
“事件”应用程序是否有 API?例如,我想从应用程序的“锻炼”部分检索信息(您燃烧的卡路里),我想检索您第一次打开应用程序时输入的个人信息。那可能吗?我如何检索这些信息? 最佳答案 没有专门针对事件应
有什么方法可以在 Apple Watch 上启用/配置 Wi-Fi 代理服务器吗? 我们想通过 Charles 测试一些东西,所以我们想将 Apple Watch 与 Charles 连接起来。 我没
我是一名优秀的程序员,十分优秀!