学习vue
2024-09-25 22:07:50
一，声明模板的时候需要新建示例
如下代码
<div id="app">
<my></my>
</div>
Vue.component("my",{
template:"<p>name</p>",
});
这样写没有结果
js代码修改为
Vue.component("my",{
template:"<p>name</p>",
});
var app=new Vue({
el:"#app"
});
这样才行
另外注意，new Vue写在下面
二、定义模板的时候不能使用小写加大写
如，下列代码出错
Vue.component("myComponent",{
template:"<p>name</p>",
});
var app=new Vue({
el:"#app"
});
需要改为 my成component
补充：v-on事件也不能用大写(⊙﹏⊙)b
三、传递数据的时候的正确写法
var data={name:"meng"};
Vue.component("my",{
template:"<p>{{name}}</p>",
data:function () {
return data;
}
});
var app=new Vue({
el:"#app"
});
如果是局部组件
var app4Data = {name: "meng"};
var app4Component = {
template: "<p>{{name}}</p>",
data:function () {
return app4Data
}
};
new Vue({
el: "#app-4",
components:{
'app4-component':app4Component
}
});
注意data的位置，不是在new Vue里面。。
如果是绑定的数据
<div id="app-5">
<input type="text" v-model="msg">
<app5-component :message="msg"></app5-component>
</div>
var app5Data={msg:"meng"};
var app5Component={
props: ["message"],
template: "<p>{{message}}</p>"
};
new Vue({
el: "#app-5",
components:{
'app5-component':app5Component
},
data:function () {
return app5Data
}
});
这里记下鄙见，单说局部组件，单纯的数据显示的时候，只能调用自身的数据，所以数据写在组件的里面。而数据绑定的时候，数据由于是绑定才得到的，绑定到哪了呢？回答当然是新对象里面，所以数据就存放到新对象里面去了(new Vue)
message和v-bind:message(:message)的区别
官网这样说到，
我理解呢是这样的，
message只是单纯的数据传递，给什么是什么。
:message绑定数据可以修改，给什么得看人家怎么处理这个后在接受这个。
四、定义模板的时候只能有一个父组件
错误代码:
var app8Component = {
props: ['content'],
template: "<p>name:{{content.name}}</p><span>age:{{content.age}}</span>"
};
页面只显示name
正确代码：
var app8Component = {
props: ['content'],
template: "<div><p>name:{{content.name}}</p><span>age:{{content.age}}</span></div>"
};
最新文章
- H5+微信支付报-1问题
- C#中属性与字段的用法
- 9.Mybatis一级缓存和二级缓存
- Redis基础介绍及安装示例
- Go - template 常用方法详解 及 注意事项
- objective C 学习之02
- LintCode Binary Tree Preorder Traversal
- php中替换函数主要用的几个函数strtr(),str_repalce()。
- 霍夫变换（hough transform）
- php获取汉字首字母的函数
- Jetty 8长连接上的又一个坑
- 九、cocos2dx之Actions
- 【开发】iOS入门 - XCode快捷键
- numpy中stack、hstack，vstack，dstack函数功能解释
- 用Google Brain的机器学习项目：Magenta，教神经网络学抖音小姐姐作曲。
- remove() 方法
- Codeforces 989D A Shade of Moonlight
- Linux基础命令---lp打印文件
- Java动态代理机制研读
- CSS3设置背景图片的大小