Vue2.js笔记--01
vue.js 学习：https://cn.vuejs.org/
vue.js下载链接：https://pan.baidu.com/s/17ronmiYJxrrBW6m7m7Zuzg
提取码：tfv7
vue.js 是一套构建用户界面的渐进式框架，是一个JavaScript MVVM库，用于在Web上构建UI，与Angular.js和react4.js并称为前端三大框架，只关注视图层，主要支持移动端，也支持PC端。Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。
框架是一套完整的解决方案，库（插件）提供某一个功能。
MVC是后端的分层开发概念，MVVM是前端视觉层的概念，主要关注视觉层分离。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
app.js ----项目的入口模块，app.js没有路由分发功能
router.js ----只有路由分发功能，不负责业务逻辑的处理。
controller ----只负责处理业务，不负责处理数据的CRUD
model ----只负责操作数据库，进行数据的CRUD（C:creat，R:read，U:update，D:delete）
view ----视图层
MVVM: M保存每个页面单独的数据，VM是调度者，分隔M和V，负责中间处理，VM提供了数据的双向绑定，V指每个页面的html代码。
导入vue.js工具包:
<script src="vue-2.4.0.js">script>
<body>//vue的实例会控制该元素中的所有内容(V)<div id="aa"><p>{{msg}}p>div><script>//导入vue包后，浏览器内存中多了一个vue构造函数,num对象即VM调度者var num=new Vue({el: '#aa', //vue要控制的区域data:{ msg:'欢迎光临'} //通过Vue提供的指令把数据渲染到页面上，无需手动操作DOM，data即MVVM中的M})script>body>
v-cloak ----解决插值表达式的闪烁问题
<style>[v-cloak]{display: none;}style><p v-cloak>{{ msg }}p>
v-text -----默认没有闪烁问题，会覆盖元素中原本的内容，但插值表达式只会替换占位符。
<p v-text="msg">p>
v-html -----用html格式显示元素内容
v-bind -----用于绑定属性，v-bind：可简写为： ，只能实现数据的单向绑定，从M绑定到V
<input type="button" value="按钮" v-bind:title="title" id="btn">document.getElementById("btn").onclick=function(){alert("hello");}
v-on ----用于绑定事件，v-on： 可简写为 @
v-model -----实现表单元素和model中的双向绑定，只能用在表单元素中
<input type="button" value="按钮" v-on:click="show">methods: {show: function () {alert("hello");}
在VM实例中，访问数据用this.方法名或属性名。
制作字符串跑马灯与停止效果：
show(){setInterval(()=>{var start=this.msg.substring(0,1); //截取第一个字符var end=this.msg.substring(1); //截取之后的字符this.msg=end+start;},400)},stop(){clearInterval(this.intervalid);this.intervalid=null; }
事件修饰符：
.stop ----阻止冒泡
.prevent ----阻止默认行为
.capture ----实现捕获触发事件的机制
.self ----实现只有点击当前元素时才会触发事件
.once ----只触发一次事件处理函数
vue中使用样式：：
1、传递一个数组，数组中可以使用三元表达式（可以用对象代替），在为class使用v-bind绑定对象时，对象属性是类名。
<h1 :class="['thin', ‘italic’, flag?'active':'', {'active':flag}]">哈哈哈h1>
2、使用内联样式，
<h1 :style="{color:'#aaa','font-weight':200}">哈哈哈h1>
<h1 :style="styleobj1, styleobj2">哈哈哈h1>data:{styleobj1 : {color:'#aaa','font-weight':200}}
在遍历对象的键值对时，除了有val和key，还有索引值i。
<p v-for="( item, i ) in list">索引值：{{ i }} --- 每一项：{{ item }}p><p v-for="( val, key, i ) in list">值是：{{ val }} --- 键是：{{ key }} ---索引值：{{ i }}p><p v-for="count in 10">这是第{{ count }}次循环p>//in后可以放普通数组，对象数组，对象和数字，用数字时，count值从1开始
<p v-for="user in list">索引值：{{ user.i }} --- 每一项：{{ user.item }}p>data:{list:{{id:1,name:'zs1'},{id:2,name:'zs2'}}}
v-for循环时，key属性只能用number获取string，只能用v-bind形式指定key的值。
<div><label>id:<input type="text" v-model="id">label><label>name:<input type="text" v-model="name">label><input type="button" value="添加" ,@click="add"><p v-for="item in list" :key='item.id'><input type="checkbox">{{item.id}}--- {{item.name}}p>div>add(){this.list.push({ id : this.id, name :this.name})}
v-if: 每次都会重新删除或创建元素，有较高的切换消耗
v-show: 每次都不会重新进行dom的删除或创建元素，只是切换display：none的样式，有较高的初始渲染消耗。
<h1 v-if='flag'>哈哈哈h1>data：{flag：true}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！