-
1. 命令行执行 : npm install -g vue-cli // 加-g是安装到全局
2.安装完成以后 可以输入命令 ：vue 回车，可以看到针对vue的命令行；
初始化项目
3.执行命令： vue init webpack demo(你新建的项目名称/文件名称)
4.执行之后将会 自动初始化一个文件夹 ：demo
5.继续执行： cd demo (这是进入到demo文件夹的命令)
6. 然后执行 安装 ：npm install
7.安装完成之后再执行命令： npm run dev
查看全部 -
<style scoped></style>
scoped 定义了作用域, 仅对当前局部组件有效
查看全部 -
Vue项目目录结构说明：
build: webpack配置文件
config: 项目开发环境/线上环境的配置文件
node_modules: 项目的依赖环境
src: 项目源代码目录
static:项目的静态资源
index.html: 项目的根实例
src目录下的文件说明：
main.js文件是项目的入口文件
App.vue是一个组件
components: 组件库
查看全部 -
用脚手架工具创建项目
1、npm install --global vue-cli 全局安装vue脚手架工具 vue-cli
2、vue init webpack my-project 创建一个基于webpack模版的新项目
3、cd my-project 进入到项目目录
4、npm run dev 运行项目
查看全部 -
父组件通过属性的形式向子组件传递数据；
子组件通过发布订阅模式向父组件传递数据；子组件发布一个事件，父组件通过监听（订阅）这个事件，就可以实现子组件向父组件传递数据。
查看全部 -
【父组件与子组件】
父组件： new Vue({})
子组件： 'todo-item'
* 父组件-->子组件通信：属性形式
* 父组件中通过属性向子组件传递值，子组件接受属性的内容并再子组件上进行内容显示
* 子组件可以绑定事件，实现子组件的删除必须删除父组件的相关数据，
*
* 子组件和-->父组件通信：发布订阅模式
* 子组件被点击需要通知父组件把数据删除，
* 传递一个$emit，触发一个自定义事件，传递一个值，
* 父组件在模板里可以监听子组件向外传递的出发的delete事件，
* 如果父组件监听到子组件的事件，执行delete事件
*
* 总结一下大概的逻辑过程：
* （1）：父组件通过props属性向子组件传值，子组件获得父组件传来的内容和索引。
* （2）：子组件通过$emit向父组件抛出触发事件名称（delete）和触发事件的list索引值。
* （3）：父组件通过监听对应事件名称（@delete）触发函数handleDelete。函数通过子组件抛出的索引值对应删除list
查看全部 -
在Vue里 ，每一个Vue组件，都是一个Vue实例 【实例=组件】；
Vue实例有的功能，Vue组件都拥有。
每个组件都是vue的实例；
每个实例的组成部分：
props、template、data、methods...
每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。
查看全部 -
通过Vue.component可以创建全局组件，在页面的任何地方都可以使用全局组件
通过new Vue({components:{"componentName":"component"}})可以声明局部组件，其中局部组件的创建格式为var componentName = {template:""}
通过props来接收父组件传递的参数
//定义全局组件
Vue.component('todo-item', {
props: ['content'],
template: '<li>{{content}}</li>'
})
查看全部 -
父组件向子组件传值是通过属性的形式传递的
子组件存在与否取决于list里的数据，要想删除子组件，就要拿子组件对应的数据删除，即删除渲染子组件的那条数据
查看全部 -
每一个组件是一个Vue的实例，每一个组件可以写Vue实例的methods,data等等。
查看全部 -
<div id="root"> <div v-if="show">hello world</div> <button @click="handleButton">toggle</button> <ul> <li v-for="item of list">{{item}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el:"#root", data:{ show:true， list:[1,2,3] }, methods:{ handleButton:function(){ this.show = !this.show; } } }） v-if与v-show的显示效果一样，但区别是： v-if：在其对应的数据项的值为false时，将清除所在的标签的dom结构。 v-show：在其对应的数据项的值为false时，将其所在的标签也就是dom结构的style的display的值改为none,将标签隐藏起来。 用哪个最好： 1.当需要频繁隐藏dom结构的话，使用v-show的性能最好，因为它不用频繁创建销毁dom结构。 2.若只操作一次的话，使用v-if最好。 v-for:循环显示一个数组在dom列表中 v-if:控制dom的存在与否 v-show:控制dom的显示与否 v-for:通过控制一组数据，来循环显示一些页面上的dom结构。查看全部 -
fullName是通过firstName和lastName计算出来的，计算的方法在computed里，只有在fullName所以依赖的数据发生改变时才会重新计算，否则它会使用上次计算结果的缓存。
计算属性：computed指的是一个属性从其他属性计算而来，好处是：所依赖的其他属性值未改变，这个属性会使用上次计算属性的缓存结果，当依赖的其他属性 改变的时候，computed才会重新计算
侦听器：watch指的是去监听某一个数据的变化，一旦数据发生了变化，就可以在侦听器里去做业务逻辑，也可以监听计算属性的变化
查看全部 -
Vue查看全部
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-TodoList</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--
v-model: 实现双向数据绑定
v-for: 实现循环列表
v-on: 实现事件绑定
this.list.push(): 向列表中添加内容数据
-->
<div id="root">
<div>
<input type="text" name="name" v-model="inputValue" >
<button v-on:click="handleSubmit">提交</button>
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root", //挂载点
data: { //数据
inputValue: '',
list: []
},
methods: { //事件
handleSubmit: function(){
this.list.push(this.inputValue) //添加内容
this.inputValue = '' //内容提交之后，恢复为空
}
}
})
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue指令—— v-if,v-show,v-for</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div>
<br>
<div v-if="show">hello world</div>
<button v-on:click="handleClick">toggle</button>
<br>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
<ul>
<!-- v-for=“item of list”，v-for表示循环list，依次输出item ，：key可以提升遍历效率，但key 值不能相同；key值相同时，用index做区别-->
<li v-for="item of list" :key="item">#{{item}}</li>
</ul>
<ul>
<li v-for="(item, index) of list" :key="index">&{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3, 4]
},
methods: {
handleClick: function(){
this.show= !this.show;
}
}
})
</script>
</body>
</html>
查看全部
举报