-
命令行工具
先安装nodejs
1. 全局安装 vue-cli
npm install --global vue-cli2. 创建项目
vue init webpack 项目名3. 进入项目目录
cd 项目名
运行npm run dev查看全部 -
scoped：局部样式，保证子组件样式只对自己有效，不影响其他
--- 随便的分割线 ---
<style scoped>
.xxx{
xxx : xxx ;
}
</style>查看全部 -
v-for key的作用查看全部
-
父组件向子组件传值，是通过属性的形式
子组件可以使用 $emit 触发父组件的自定义事件。
--- 删除分割线 ---
1. 子组件内接收一下index
2. 子组件内的li 加点击事件
3. 使用$emit触发自定义事件
this.$emit( "delete" , this.index )
//delete 事件名 this.index 事件对应的值
4.父组件监听子组件delete事件，执行父组件内的handleDelete方法
//@delete="handleDelete"查看全部 -
bulid文件夹下放置项目的配置文件，可不动
configuration文件夹下放置针对开发环境和线上环境的配置文件，可不动
node_modules文件夹下是项目的依赖
src目录是源代码放置的目录
static目录放置静态资源
下面的前6个文件都不需要改
编写工程化代码主要是编写src中的文件，main.js文件是整个项目的入口
查看全部 -
<ul><todo-item></todo-item></ul>
全局组件
Vue.component( 'todo-item',{
template:'<li>item</li>'
})局部组件
var TodoItem={ template:'<li>item</li>' }
new Vue({
el:"#x",
components:{ "todo-item":TodoItem }
})--- 不知道怎么形容的分割线 ---
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item" //新建属性，把值传递给'todo-item'这个组件
>
</todo-item>Vue.component( 'todo-item',{
props:['content'], //props:接收从外部进来的content属性
template:'<li>{{content}}</li>'
})查看全部 -
插值表达式！
查看全部 -
v-for
查看全部 -
todolist
input双向绑定
循环列表
绑定提交事件：把value插入数组内 this.list.push(this.dataValue)
提交后，input为空this.dataValue=""
查看全部 -
显示隐藏
v-if 会清除dom v-show隐藏但保留DOM
循环
v-for <li v-for="(item,index) of list" :key="index">{{item}}</li>
item：{{item}}
index：下标
list：data内的数组
:key：必加，key值不能相同
--？？？--
如果需要频繁操作列表，key为index是存在问题的
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="test">
<div>
<input v-model="inputvalue">
<button @click="handleclick">提交</button><!-- @替换v-on: -->
</div>
<ul>
<todoitem v-for="(item,index) of list" :key="index"
:content="item"></todoitem><!--组件-->
</ul>
</div>
<script type="text/javascript">
//每个组件都是一个vue实例，每个实例都是一个vue组件
//实例中的方法都可在组件中使用
//全局
Vue.component('todoitem',{//组件的名字
props:['content'],//接收组件的值
template:'<li>{{content}}</li>'//模板
})
//局部
/*var todoItem = {
template:'<li>item</li>'
}*/
//实例 ，在此实例中的模板（template）就是挂载点（#test）下的所有dom
new Vue({
el:'#test',
data:{
inputvalue:'',
list:[]
},
methods:{
handleclick:function(){
this.list.push(this.inputvalue);
this.inputvalue="";
}
}
})
</script>
</body>
</html>
查看全部 -
计算属性，计算data内属性
computed:{
fullName : function(){xxxxxxxx}
}
侦听器，监测某一数据或计算属性发生变化时执行function
watch:{
fullName : function(){xxxxxxxx}
}
查看全部 -
属性绑定 v-bind: <div v-bind:title="dataTitle"></div>
简写为“:”<div :title="dataTitle"></div>
“dataTitle”引号内是JS表达式，“‘xxx’+dataTitle”
双向数据绑定 v-model="dataCont"
---???---
v-model 只用在input上代替value吗？
查看全部 -
new Vue({})从new开始到})结束,是vue实例,该实例有自己的模板.
挂载点下面的内容(不包括挂载点id=root这个元素,是指他里面包含的元素)都是他的模板,
每一个vue组件都是Vue实例,,任何一个项目都是由千千万万个vue实例组成的,组件中也可以添加methods,compute,data等属性实例,
vue组件和实例,都可以叫vue组件,因为组件就是实例,实例就是组件.
new Vue({})这个根实例下如果没有写template模板,那么默认会将挂载点包含的内容当做模板
查看全部 -
<div v-text="变量"></div>
<div v-html="变量"></div>
<div v-on:click="函数名"></div> //简写@click="函数名"
methods:{
函数名: function(){ }
}
直接改变data内的cont this.cont=" 新内容 "
查看全部
举报