发表于： 2020-07-29 22:55:12
0 2669
今天完成的事情：今天写了一些vue的模板语法以及处理了一些bug
明天计划的事情：继续后续的学习
遇到的问题：实际操作较少还是需要多实操练习
收获：今天再写模板表格语法的时候页面结构出现了一点小问题
代码
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.base {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<table>
<item></item>
<item></item>
<item></item>
<item></item>
</table>
</div>
<script>
Vue.component('item', {
template: '<tr><td> {{content}}</td></tr>',
data: function () {
return {
content: "表格"
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
<script src="./test.js"></script>
</body>
</html>
页面效果
虽然看上去很正常但是结构
tr跑table外面去了，百度之后了解到h5的一个小bug，需要使用is来解决
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.base {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr is="item"></tr>
<tr is="item"></tr>
<tr is="item"></tr>
<tr is="item"></tr>
</table>
</div>
<script>
Vue.component('item', {
template: '<tr><td> {{content}}</td></tr>',
data: function () {
return {
content: "表格"
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
<script src="./test.js"></script>
</body>
</html>
页面结构
结构正常
table，ul,ol,select这几种的时候,当用tr,li,li,option作为子组件时，需要用is来绑定
另外需注意deta需要时函数，大概跟作用域有关
另外今天写了简单的双向绑定
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.base {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div class="fd-app">
<h4>{{msg}}</h4>
<!-- 使用v-model指令，可用实现表单元素和Model中数据的双向数据绑定 -->
<!-- 注意：v-model只能运用在表单元素中 -->
<!-- input（radio，text，address，email。。。） select checkbox textarea -->
<input type="text" v-model="msg" style="width: 100%">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
var vm = new Vue({
el: ".fd-app",
data: {
msg: '你好吗',
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
},
methods: {
}
})
</script>
<script src="./test.js"></script>
</body>
</html>
运行效果
改变数值
可以看到绑定上了
剩下的明天继续
返回列表
评论