-
v-text="文本输出，不编译” v-html="编译输出"
v-on 这是函数调用 v-on:click="这里写自定义函数名称"
查看全部 -
v-model 双向数据绑定， v-bind（:） 单项数据绑定
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拆分组件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
姓:<input v-model="xing"/>
名:<input v-model="ming"/>
<button @click="submit">
提交
</button>
<div>已提交{{count}}个数据</div>
</div>
<ul>
<todo-item
:content="item"
v-for="(item,index) of list" :key="index"
></todo-item>
</ul>
</div>
<script>
var todoitem={
props:['content'],
template:'<li>{{content}}</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':todoitem
},
data:{
xing:'',
ming:'',
list:[],
count:0
},
methods:{
submit:function () {
this.list.push(this.name)
this.xing=''
this.ming=''
}
},
computed:{
name:function () {
return this.xing+this.ming
}
},
watch:{
list:function(){
this.count++
}
}
})
</script>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist计数器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
姓:<input v-model="xing"/>
名:<input v-model="ming"/>
<button @click="submit">
提交
</button>
<div>已提交{{count}}个数据</div>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
xing:'',
ming:'',
list:[],
count:0
},
methods:{
submit:function () {
this.list.push(this.name)
this.xing=''
this.ming=''
}
},
computed:{
name:function () {
return this.xing+this.ming
}
},
watch:{
list:function(){
this.count++
}
}
})
</script>
</body>
</html>查看全部 -
this.content指的是Vue实例下面的data属性的content变量
查看全部 -
v-text不转义字符串里的标签含义， v-html专义
v-text: 文本会原样输出
v-htm: 文本会被当作html解析输出查看全部 -
{{msg}} // 插值表达式
查看全部 -
挂载点：指的是el标记的
模板：既可以写在挂载点内部，也可以写在js的template里面
查看全部 -
Vue指令中v-text 可以将html标签转义，v-html不可以；
查看全部 -
当给局部组件增加样式,需要在<style>中增加scoped <style scoped>,该样式只作用于当前该局部组件
查看全部 -
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。查看全部 -
{{msg}} // 插值表达式
查看全部 -
new Vue({
el:"#root", //绑定页面上id为root的元素节点，也叫挂载点
data:{
msg:"hello world"
}
});
<div id ="root">{{msg}}</div>
//通过id绑定Vue对象，通过{{msg}} 来引用Vue对象的数据
查看全部 -
启动项目
命令行运行 npm run start模板下只能有一个包裹元素
<template><div>xxxxx</div></template>vue-cli内data是函数
data(){
return{
xxx:""
}
}import 子组件名 from './components/子组件名'
export default{
components:{
"标签名"：子组件名
},
}查看全部 -
父组件和子组件交互,父组件通过在模板的子组件中定义属性的方式向子组件传递数据,子组件通过发布对应模式($emit('对应模式的方法名'))的方式向父组件传递数据.父组件监听子组件发布的对应模式事件,在子组件中通过:@对应模式的方法名的方法
1,new Vue({})可以当场父组件,其余的组件可以当成子组件,vue中父组件通过属性的形式给子组件传值,
2,父组件模板中的方法(子组件也是在模板中,所以在父组件模板中的子组件方法其实是父组件的方法),而子组件中的方法就是在子组件中定义的方法.
查看全部
举报