-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./Vue-a.js"></script><!-- 引入vue库最好在head中-->
</head>
<body>
<div id="root"></div>
<script>
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1>',
data: {
msg:" world"
}
})
</script>
</body>
</html>
查看全部 -
<script src="js/vue.js"></script>放在head标签之间，避免抖屏。
new Vue（{
el: "id的值",//引用id的值，Vue通过el与属性值root进行绑定
msg:"输出值"可直接填写任意输出值
注意vue实例里不同属性用逗号隔开
查看全部 -
在Vue里 ，每一个Vue组件，都是一个Vue实例 【实例=组件】；
Vue实例有的功能，Vue组件都拥有。
每个组件都是vue的实例；
每个实例的组成部分：
props、template、data、methods...
每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。
查看全部 -
页面内容过于复杂，可将组件拆分，可定义全局组件或局部组件：
1、全局组件：在页面任何地方都能使用
//定义全局组件
Vue.component("todo-item", {
template: "<label>我是全局组件</label>"
});
new Vue({
el: "#root",
});
//使用全局组件
<div id="root">
<todo-item></todo-item>
</div>
2、局部组件：要在外层Vue实例里进行注册
//定义局部组件
var todoItem = {
template: "<label>我是局部组件</label>"
}
new Vue({
el: "#root1",
components: { //局部组件：要在挂载点(它的外层Vue实例，即此处的root1)进行注册
"todo-item-1": todoItem
}
});
//使用局部组件
<div id="root1">
<todo-item-1></todo-item-1><!--局部组件：只能在挂载点底下使用-->
<todo-item></todo-item><!--全局组件：在页面任何地方都能使用-->
</div>
组件拆分之后的传参问题：外部(html页面)可以通过自定义属性的形式传参，组件要定义props[]接收属性
//父组件向子组件传递数据：通过属性
Vue.component("todo-item-2", {
props: ["content", "index"],//接收从外部传进来的属性content、index
template: "<li>{{index+1}}、{{content}}</li>"
});
new Vue({
el: "#root2",
data: {
inputValue: "",
list: []
},
methods: {
submitClick: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
<div id="root2">
<div>
<input v-model="inputValue" />
<button @click="submitClick">提交</button>
</div>
<ul> <!--自定义属性content、index-->
<todo-item-2 v-for='(item,index) of list'
:key="index"
:content="item"
:index="index"
>
</todo-item-2>
</ul>
</div>
查看全部 -
v-if和v-show：这两个属性用来控制dom显示隐藏，当值为true则显示，为false则隐藏。if和show的一大区别在于if是通过销毁dom的方式实现隐藏，而show是通过display=false的方式实现的，具体需要灵活使用；
v-for属性：主要用于遍历数组数据，并自动生成dom列表。如v-for='(item, index) of list' :key='index'，其中:key必须是唯一的，item是遍历出的子项；
查看全部 -
1、计算属性：（高效率，当计算的值发生改变的时候，就会重新计算）
语法：
computed：{
c：function（）{
return this.a+this.b
}
}
2、侦听器：（当某个值发生改变的时候，就进行对应的操作）
语法：
wacth：{
a：function（）{
//业务逻辑
}
}
查看全部 -
v-on（事件）的缩写是@
v-bind（绑定）的缩写是：
v-model（数据双向绑定）
查看全部 -
vue中父组件向子组件传值是通过绑定属性的形式传递的，父组件可以监听子组件的绑定事件，子组件通过$emit 向外触发事件
查看全部 -
vue中的每一个组件都是vue实例
查看全部 -
有点绕，没搞懂
查看全部 -
单向绑定：v-bind 数据决定页面的显示，但是页面无法决定数据的内容
双向绑定：v-model
查看全部 -
小白总结：可以使用methods 点击事件方法 改变data下面属性的值（设置为bool类型的），进行取反
//每次点击取到的值为 ' ！' 反值，这样就可以反复的进行显示和隐藏
//点击当前的某个元素，在需要 被操作 的元素里面添加 v-show或者if方法的值为我们所取的属性值
查看全部 -
小白总结：v-for指令，关键字 of 对 list进行循环遍历， 遍历过后 item代表的是每个元素， index代表的是每个元素的索引，是唯一值（key的值也可以是 item 但是必须是唯一值，不能有重复的，所以加一个索引）
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-if</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue: 'hello',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
</html>
查看全部 -
zgl 2019.6.8 study done.
查看全部
举报