组件：基础的基础

知识点

组件（Component,Portlet）

组件

组件就是页面上的一小块区域内容，完成一个小的页面功能，请参照视频第六课。

综合例

<div id="myApp"><today-weather></today-weather>
</div>
<script>Vue.component('today-weather', {template: '<div>今天下雨，出不去啦，干什么呢？看Youtube吧!</div>'});var myApp = new Vue({el: '#myApp', });
</script>

显示：

组件：局部的组件

知识点

组件的局部注册

组件

Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。

综合例

<div id="myApp"><my-weather></my-weather>
</div>
<script>var WeatherComponent = {template: '<div>今天下雨，随它去吧！</div>'};var myApp = new Vue({el: '#myApp', data: {},components: {'my-weather': WeatherComponent},});
</script>

显示：

组件：表行组件

知识点

制作表行组件

表行组件

为自己的页面表格编写表行组件。

综合例

<div id="myApp"><h1>2017年最期待的游戏是：</h1><table border="1"><tr><td>编号</td><td>游戏名称</td></tr><my-row1></my-row1><my-row2></my-row2><my-row3></my-row3></table>
</div>
<script>Vue.component('my-row1', {template: '<tr><td>(1)</td><td>塞尔达传说:荒野之息(3/3)</td></tr>'});    Vue.component('my-row2', {template: '<tr><td>(2)</td><td>新马里奥赛车(4/28)</td></tr>'});    Vue.component('my-row3', {template: '<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'});    var myApp = new Vue({el: '#myApp', data: {},methods: {},});
</script>

显示：

组件：数据

知识点

组件的数据函数

组件的数据

为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性。

综合例

<div id="myApp"><div>今天的天气是<today-weather/></div>
</div>
<script>Vue.component('today-weather', {template: '<strong>{{todayWeather}}</strong>',data: function(){return {todayWeather: '雨加雪'};}});var myApp = new Vue({el: '#myApp', });
</script>

显示：

组件：传递数据

知识点

为组件传递数据

组件数据传递

制作可接受参数的组件。

综合例

<div id="myApp"><h1>您的成绩评价</h1><test-result :score="50"></test-result><test-result :score="65"></test-result><test-result :score="90"></test-result><test-result :score="100"></test-result>
</div>
<script>Vue.component('test-result', {props: ['score'],template: '<div><strong>{{score}}分，{{testResult}}</strong></div>',computed: {testResult: function() {var strResult = "";if (this.score < 60)strResult = "不及格";else if (this.score < 90)strResult = "中等生";else if (this.score <= 100)strResult = "优秀生";return strResult;}}});var myApp = new Vue({el: '#myApp', });
</script>

显示：

组件：传递变量

知识点

为组件传递变量数据

组件的数据

制作可接受变量参数的组件。

综合例

<div id="myApp"><div>请输入您的名字：<input v-model="myname"></div><hr/><say-hello :pname="myname" />
</div>
<script>Vue.component('say-hello', {props: ['pname'],template: '<div>你好，<strong>{{pname}}</strong>！</div>',});var myApp = new Vue({el: '#myApp', data: {myname: 'Koma'}});
</script>

显示：

组件、局部的组件、表行组件、组件数据传递相关推荐

javascript表单之间的数据传递
今天有朋友问我关于用javascript来进行页面各表单之间的数据传递的问题,我以前也写过,不过从来没有注意,今天总结了一下,希望能够给大家一些帮助,也帮助我总结以前学过,用过的知识. 一,最简单的就 ...
android数据回传多个页面_Android Day06四大组件之Activity多页面跳转和数据传递
ToolBar中menu无法同时显示图标和文字问题的解决方法 Toolbar添加返回按钮 ToolBar与ActionBar 1.什么是Activity 官方文档是这么说的:Anwhich users ...
php wscript.shell组件,wscript.shell × 命令行执行组件
动画内任何广告皆为作者个人行为,网络交易,风险自负大家好.我是辉少.那次的IIS重定向挂马大家都了解了吗? 这次给大家带来的是:修改 wscript.shell 名称达到"独享" ...
组件cdn引入_高性能 React UI组件库SHINEOUT
今天给大家推荐一款超不错的React.js桌面端UI组件库Shineout. shineout 基于react.js构建的轻量级UI组件库.包含表单元素.数据表.通知提示.布局选项.导航等多种组件. ...
vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
小程序学习之小程序组件（三）表单组件
1.button 按钮组件组件的属性: 1)size属性 default 默认值宽度与手机屏幕宽度相同 mini 迷你型,按钮尺寸.字号都比普通按钮小 2)t ...
react 表单受控组件
一.受控组件受控组件: 在React中,表单元素(input select textarea等) 被React以setState的方式驱动视图变化的元素称为受控函数.每个受控组件都维护自己的stat ...
组件命名方式||局部组件注册：局部组件只能在注册他的父组件中使用
组件命名方式组件注册注意事项如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签 ...

组件、局部的组件、表行组件、组件数据传递

组件：基础的基础

知识点

组件

综合例

显示：

组件：局部的组件

知识点

组件

综合例

组件：表行组件

知识点

表行组件

综合例

显示：

组件：数据

知识点

组件的数据

综合例

显示：

组件：传递数据

知识点

组件数据传递

综合例

显示：

组件：传递变量

知识点

组件的数据

综合例

组件、局部的组件、表行组件、组件数据传递相关推荐

最新文章

热门文章

组件、局部的组件、表行组件、组件数据传递

组件：基础的基础

知识点

组件

综合例

显示： 组件：局部的组件

知识点

组件

综合例

组件：表行组件

知识点

表行组件

综合例

显示： 组件：数据

知识点

组件的数据

综合例

显示： 组件：传递数据

知识点

组件数据传递

综合例

显示： 组件：传递变量

知识点

组件的数据

综合例

组件、局部的组件、表行组件、组件数据传递相关推荐

最新文章

热门文章

显示：

组件：局部的组件

显示：

组件：数据

显示：

组件：传递数据

显示：

组件：传递变量