基础语法
读取data值：{{}}代码样例
插入HTML：v-html
标签属性：v-bind（简写 : ）
条件渲染1：v-if
条件渲染2：v-else
条件渲染3：v-else-if
条件渲染4：v-show（隐藏）
列表渲染：v-for < h3 v-for="(item,index) in names" v-bind:key=“index”>{{item}}{{index}}
事件监听：v-on:click（简写 @click ）
输入绑定：v-model
插槽：v-slot （简写 # ） < template v-slot:s>这是一个插槽< /template>
v-once（控件只渲染一次）
修改兄弟组件值：this .$ parent.$refs.c1.msg=“aaa”
1、{{}}、v-html、v-bind
>
export default {
name: 'HelloWorld',
data(){
return {//这个json对象中的值，即可在 vue上方的div中进行使用
message:"hello world",
msg:"world hello",
message1:"我脑袋不灵光",
hrefurl:"http://www.baidu.com"
}
}
}
2、v-if、v-else-if、v-else、v-show
hello world
world hello
星期一
哈哈
不知道
哈哈哈哈show
>
export default {
name: 'HelloWorld',
data(){
return {//这个json对象中的值，即可在 vue上方的div中进行使用
iden:false,
num:2
}
}
}
3、v-for
{{item}}{{index}}
{{item}}=={{name}}=={{index}}
>
export default {
name: 'HelloWorld',
data(){
return {//这个json对象中的值，即可在 vue上方的div中进行使用
arr:["hello","world","helloworld"],
dept:{
deptno:1,
dname:"销售部",
loc:"济南"
}
}
}
}
4、v-on
>export default {
name: 'HelloWorld',
data(){
return {//这个json对象中的值，即可在 vue上方的div中进行使用
}
},methods:{
doclick(){
console.log("hello world");
},dodblclick(){
console.log("我不小心");
},say:function(message){
console.log(message);
},dosubm:function(){//阻止默认原生得js事件
console.log("我提交了..");
}
}
}
【vue|vue基础语法】5、v-model
{{msg}}
>
export default {
name: "App",
data() {
return {
msg: "hhhhh",
};
},
methods: {
dochange(val) {
this.width = val;
},
}
};
6、watch监听器
>
export default {
name: 'HelloWorld',
data(){
return {
str:""
}
},methods:{
doblur(){
console.log("this is blur function");
}
},watch:{
str(){
console.log("监听"+this.str);
}
}
}
推荐阅读
- typescript|Typescript总结(三)——函数类型详解
- 前端|vue 基础语法 总结及例子说明
- js|Vue全家桶-组件化开发
- Vue.js|VUE全家桶系列之基本知识点
- Vuejs|Vue全家桶之组件基础（二）
- Vuejs|Vue全家桶之Vue核心（一）
- Vuejs|Vue全家桶之Vue CLI入门（三）
- JavaScript|JS内置引用类型/内置对象
- 笔记|ES6 新特性介绍