Vue的安装
一下内容都是来自乐优商城笔记
安装node环境：: link.
node自带npm，在控制台输入 npm -v查看版本号
npm install nrm -g 安装nrm
nrm ls 查看npm 的仓库列表，带*的就是当前选中的镜像仓库
nrm use taobao 指定要使用的镜像源
nrm test npm 测试速度
下载vue
https://github.com/vuejs/vue
在idea中点开Terminal控制台，进入到要编写的项目
npm init -y 初始化
npm install vue --save 安装vue
<body>
<div id="app">
<h2>{{name}}</h2>
<div>
</body>
<script scr="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //el就是该vue实例要渲染的页面元素
data:{
name: "乐优商城" //要渲染的数据
}
}
v-model=“name”
这个是数据绑定
@click="" 点击事件
钩子函数
beforeCreated:Vue实例化的时候调用
created:创建实例之后调用
beforeMount:页面加载完成之后调用，
beforeDestroy:销毁实例前调用
destroyed:销毁实例时调用
v-text:将数据输出到元素的内部，就相当于{{}}
v-html:将数据输出到元素的内部，就相当于{{}}，有Html渲染
——————————————————————————————————————————————————
事件修饰符
.stop:阻止事件冒泡到父元素
.prevent:阻止默认事件发生
.capture:使用事件捕获模式(这个不太清楚是什么意思)
.self:只有元素自身触发事件才执行（冒泡或者捕获都不执行）
.once:只执行一次
<!--右击事件-->
比如：v-on:contextmenu.prevent="num++"
按键修饰符：
<!--只有在“keyCode”是13时调用vm.submint()-->
v-on:keyup.13="submit"
.enter
.tab
.delete(删除和退格)
.esc
.space
.up
.down
.left
.right
遍历
v-for="item in items"
v-for="(item,index) in items"
遍历对象
v-for="(value,key,index) in object"
Object:{name:'乐优',age:15}
key值
<li v-for="(item,index) in items" :key=index></li>
v-if v-else v-else-if 直接注释掉
v-show元素的Css属性为display
v-bind可以同于class和style
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
