Vue.js学习详细课程系列--共32节（5 / 6）

Vue.js学习课程（5 / 6）

• • • 25. 组件：表行组件
    • • 知识点
      • 表行组件
      • 综合例
    • 26. 组件：数据
    • • 知识点
      • 组件的数据
      • 综合例
    • 27. 组件：传递数据
    • • 知识点
      • 组件数据传递
      • 综合例
    • 28. 组件：传递变量
    • • 知识点
      • 组件的数据
      • 综合例

25. 组件：表行组件

知识点

• 制作表行组件

表行组件

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

综合例

<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: '(1)塞尔达传说:荒野之息(3/3)'});    Vue.component('my-row2', {template: '(2)新马里奥赛车(4/28)'});    Vue.component('my-row3', {template: '(3)喷射乌贼娘2代'});    var myApp = new Vue({el: '#myApp', data: {},methods: {},});
script>

26. 组件：数据

知识点

• 组件的数据函数

组件的数据

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

综合例

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

27. 组件：传递数据

知识点

• 为组件传递数据

组件数据传递

制作可接受参数的组件。

综合例

<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: '{{score}}分，{{testResult}}',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>

28. 组件：传递变量

知识点

• 为组件传递变量数据

组件的数据

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

综合例

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！