-
v-bind:可以缩写成:，如“v-bind:title”可以缩写成“:title”
v-on:可以缩写成@，如“v-on:click”可以缩写成“@click”
查看全部 -
通过script标签引入vue.js的时候，最好是把script标签放到head标签里，可以避免“抖屏”的情况。
查看全部 -
v-bind：=：查看全部
-
v-bind查看全部
-
父子组件的一些交互.
父组件如何向子组件传参数
子组件如何向父组件传参数~
父组件向子组件传递数据，可以用属性。
子组件向父组件可以发出事件，父组件监听到该事件，再触发方法
查看全部 -
<div id="root">
<div>
<input type="text" v-model="input" />
<button type="button" @click="handleClick">
提交
</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item" :index="index" @delete="handleDelete">
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props : ['content','index'],
template : '<li @click="handleClick">{{content}}</li>',
methods : {
handleClick:function(){
//alert('sss');
this.$emit('delete',this.index);
}
}
})
new Vue({
el:"#root",
data:{
input : "hello",
list : []
},
methods:{
handleClick:function(){
if(this.input == ""){
alert('请填写');
} else {
this.list.push(this.input);
this.input = '';
}
},
handleDelete:function(index){
this.list.splice(index,1);// 删除,从第index起,一个元素
}
}
});
</script>
查看全部 -
组件就是实例,
实例就是组件~
查看全部 -
<div id="root">
<div>
<input type="text" v-model="input" />
<button type="button" @click="handleClick">
提交
</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props : ['content'],
template : '<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
input : "hello",
list : []
},
methods:{
handleClick:function(){
if(this.input == ""){
alert('请填写');
} else {
this.list.push(this.input);
this.input = '';
}
}
}
});
</script>
查看全部 -
new Vue({})---创建一个Vue实例
el: "#root"---绑定id为root的元素（挂载点，只处理挂载点下的内容）
data: {msg: "Hello World"}---实例的数据项
template---模板，挂载点即元素里面的内容为模板，可在元素或实例中template下定义
methods---v-on指令绑定的方法
{{msg}}---插值表达式，在元素中使用，msg为实例data中数据项
computed---计算属性
watch:{}---监听器，实例中属性
指令
v-text---显示内容，内容里的元素被转译
v-html---显示内容，内容里的元素不被转译
v-on---绑定事件（简写 @），v-on: click="function"绑定一个点击事件
v-bind---属性绑定（简写 ：），实例=>元素 单向数据绑定。:title='title1'，title1为data中数据项，=后为表达式，因此'1234'+'title1'也可以
v-model--- 双向数据绑定，元素<=>实例
v-if---直接从dom中删除
v-show---设置display:none
v-for---循环，v-for="{item, index} for list" :key="index"，list数组为data中数据项。:key提升渲染的效率，每一项值都不能相同
组件
定义全局组件，全局可用
Vue.component('todo-item', {
template: '<li>hello world</li>'
})
定义局部组件，需要在vue实例components属性中注册
var TodoItem = {
template: '<li>hello world</li>'
}
components: {'todo-item' : TodoItem}
组件在元素中使用
<todo-item></todo-item>
组件之间数据通信
父=>子---通过属性进行传递
元素中 :content=“item"
组件中props: ['content']---接受外层传递过来的属性content
子=>父---通过发布定义模式进行传递
父组件@delete="function"---父组件监听到子组件delete事件执行function方法
子组件 this.$emit('delete', this.index)---子组件向外触发一个delete事件，同时携带一个参数
全局样式与局部样式
组件中<style scoped></style>
scoped限制样式只对当前组件有效
不加scoped为全局样式，会影响其他组件样式
查看全部 -
1、脚手架vue-cli安装与项目创建
vue-cli安装
npm install --global vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack my-project---my-project自定义项目名，通过cd切换项目创建的路径
进入项目，安装依赖
cd my-project
npm run dev
打开项目网页
2、vue项目介绍
build 项目配置文件
config开发和线上一些配置文件
node_modules项目依赖
src源代码
static静态资源文件
index .html
src/main.js 项目入口文件
查看全部 -
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show : true,
list : [1,1,3,4]
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
});
</script>
查看全部 -
head:
<script src="./vue.js"></scipt>;
<body>
<div id=“root”>{{msg}}</div>
<script>
new vue({
el:"#root",
data:{
msg:"hello world"
}
})
</script>
查看全部 -
侦听器,是监听某个数据的变化,一旦发现数据的变化,就可以去做业务逻辑~~
查看全部 -
computed 计算属性
查看全部 -
属性绑定 v-bind:title 或者直接:title
双向数据绑定 v-model=""
<div id="root">
<div :title="title">hello world</div>
<input v-model="content" type="text" />
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title : "this is hello world",
content : "i am content"
}
});
</script>
查看全部
举报