-
数据--
单向绑定:v-bind
双向绑定:v-model
查看全部 -
挂载点,模板,实例
查看全部 -
组件即实例
查看全部 -
v-bind: 简写 :查看全部
-
事件 v-on: 简写 @ 属性 v-查看全部
-
定义一个局部组件 ，需要在new Vue（{ 'todo-item' : TodoItem }）注册一下
查看全部 -
全局组件写法
查看全部 -
挂载点、模板与实例之间的关系
挂载点：也就是Vue实例中el属性对应的id的dom节点，Vue只会处理挂载点的内容。
模板：挂载点内部的内容都称作模板内容，其中模板还可以放置在Vue的实例中进行编写，如果使用Vue实例方式，则需要使用标签把数据抱起来。
实例：实例需要指定挂载点，还可以指定模板和数据，并且Vue会自动结合模板和数据进行展示。
查看全部 -
创建第一个Vue实例
vue官方网站：cn.vuejs.org
官方网站——>学习——>教程——>左侧安装（官方提供了多种安装vue的方式，这里使用标签<script>引入的方式使用vue，这里包括两种版本，开发版本会包含完整的警告和调式模式，开发时都使用这种，生产版本它删除了警告如果不想下载vue代码，则可以通过CDN方式也就是通过网址链接方式使用vue，这里下载开发版本学习vue.js）
vue的引入：只需要把开发版本的代码复制到文件中，并在html中使用标签<script>引入，并尽量放置在<head>内，可防止发生抖屏情况。
vue的使用：可以在<body>内使用<script>在该标签内编写如下代码，并可以给vue实例传递参数，这个参数大概分为几个部分。
参数el：让vue实例去接管页面上的元素（和哪一个dom节点进行绑定），例如去接管id为root的元素。
参数data：vue实例的数据存放的地方（相当于标签内容存放地）
使用vue实例显示标签内容：使用两个花括号，中间写内容。
在没有使用vue.js而是使用原生js都是如下这种方式
使用vue.js，关注点不在是页面中标签里的内容，而是着重于数据的编写。查看全部 -
vue.js课程介绍
【1】vue.js基础语法
【2】vue.js案例实践
【3】做一个小功能TodoList
【4】项目构建工具Vue-cli的使用（使用它构建vue.js标准的大型功能的工程目录，并在构建的目录下重新实现TodoList功能）
查看全部 -
安装vue-cli的命令
查看全部 -
父组件通过属性向子组件传值 子组件通过发布订阅来实现与父组件通信查看全部
-
像数组里添加push()
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>todoList</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="inputValue"></input>
<button @click="handleClick">提交</button>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<div id="root2">
<input v-model="inputValue2"></input>
<button @click="handleClick2">提交</button>
<ul>
<todo-item v-for="item of list2" :content="item"></todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component("todo-item",{
props:["content"],
template:'<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleClick:function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
new Vue({
el:"#root2",
data:{
inputValue2:"",
list2:[]
},
methods:{
handleClick2:function () {
this.list2.push(this.inputValue2);
this.inputValue2 = "";
}
}
})
</script>
</body>
</html>查看全部 -
v-bind(缩写":")l:单项属性绑定；根据vue实例中data属性，与其中对象的key值相绑定，可修改相应属性的数据
v-model:双向绑定；div中某一个标签的值发生变化后，可以改变vue实例中data属性相应的对象值，反之相同；
查看全部
举报