起步
加载并导入, 当你导包之后, 就多了一个Vue构造函数实例化vue对象 new Vue({配置参数})通过配置el参数, 关联视图层(用户能看到的页面)通过data参数设置相关信息, 存储数据通过{{}}表达式在视图层渲染(简洁模板语法)MVC与MVVM 1.mvc是Model-View-Controller的简写，即模型-视图-控制器。model指后端传递的数据，view指页面展示，controller指业务逻辑。目的是将模型层和视图层代码分离，并通过控制层连接。mvc是单向通信。 2.MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。model指后端传递的数据，view指页面展示，viewmodel是mvvm模式的核心，是用于连接view和model的桥梁。mvvm是双向数据绑定。 一是将model转成view，即将后端传递的数据转化成页面内容，实现方式是：数据绑定； 二是将view转成model，即将页面内容转化成后端数据，实现方式是：DOM事件监听
MVVM的优点： 主要解决了mvc中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。 双向数据绑定的方式，保证了数据的一致性，同时简化了代码
vue中的MVVM
<body> <!--视图容器 : 相当于是我们MVVM中的V 视图层--> <div id="app"> <h1>{{msg}}</h1> <h2>{{num}}</h2> </div> <script src="lib/vue-2.4.0.js"></script> <script> // 我们new出来的vm对象, 也就是MVVM中的VM, 视图模型 const vm = new Vue({ //el : element元素 作用 : 用来关联页面 el: "#app", //data: 储存数据 ,是MVVM中的M, 数据层 data:{ msg:"hello Vue!!!", num: 10 } }) </script> </body>vue常用指令 凡是带有v-前缀, 表示都是vue提供的特殊指令
①v-cloak 使用v-cloak来解决闪烁 . 需要搭配display: none的样式来写的
<h1 v-cloak>{{msg}}</h1> <style> [v-cloak]{ display: none; } </style>②v-text 不会解析html标签 ③v-html 会解析html标签
④v-model : 用于input标签及select, textarea等等表单数据来进行双向数据绑定 作用 : 主要监听用户的输入事件更新数据
v-if和v-show都可以控制dom元素显示隐藏 ⑤v-if : 将dom元素真个添加和删除 可以和v-else来紧密判断 ⑥v-show : 为元素添加display: none 使用场景 : v-show适合频繁切换, v-if适合运营条件不大可能的改变
⑦v-bind: 绑定属性
<!--绑定属性--> <div v-bind:title="title" v-bind:id="idSelector">内容</div> <!--简写--> <div :title="title" :id="id">简写的内容</div> <!--绑定class类名--> <style> .red{ color: red; } .pink{ background: pink; } </style> <p :class="'red'">绑定class的第一种写法</p> <p :class="['red', 'pink']">绑定class的第二种写法: 多类名</p> <p :class="{red : flag, pink : false }">绑定class的第三种写法: 使用对象</p> <p :class="flag?'red':'pink'">绑定class的第四种写法: 三元表达式</p>⑧v-on : 绑定事件类型
<button v-on:click="num++">点击</button> <p>{{ num}}</p> <!--绑定事件触发函数--> <button @click="add(flag)">点我</button> <!--点击切换颜色--> <button @click="toggle" :class="{red: flag}">点我!</button>⑨v-for : 用来遍历数组 v-for="item in arr" 参数① : (item,index) 遍历时数组里的每一个数据和对应的下标, 形参 参数② : in 关键词 固定搭配 参数③ : arr 你要遍历的数组 key指定唯一的值, 一定要搭配v-for来使用
<li v-for="(item, index) in arr" :key="item.name"> <input type="checkbox"> {{ index+1 }}====={{ item.name }} ====={{item.age}} </li>⑩自定义指令
1.全局自定义指令 语法：js中使用Vue.directive(‘指令名称’)，来声明自定义指令 参数1：指令名称，注意：定义时，不需要加v-前缀，调用时需要加v-前缀调用 html中 使用v-为前缀加指令名 来使用当前的自定义指令
Vue.directive('focus', { bind: function (el) {//1.bind当指令绑定到元素上时触发，只执行一次 console.log(el);//el 绑定的dom元素 }, inserted: function (el) {//2.inserted元素插入到dom中时会触发，只执行一次 el.focus();//只要是关于操作js 至少在inserted中执行 }, update: function () { //3.当dom节点更新时会触发，触发多次 } }) Vue.directive('color', { bind: function (el, binding) { console.log(binding); el.style.color = binding.value; } }) <input type="text" v-focus v-color="'red'" class="form-control" v-model='keywords'> <a v-color="'green'" href="#">删除</a>2.私有自定义指令
// 私有自定义指令 directives: { // 指令名:{钩子函数如上 bind，inserted，update} fontSize: { bind: function (el, binding) { console.log(binding); el.style.fontSize = binding.value; } } } <td v-color="'red'" v-font-size="'30px'">嘻嘻嘻</td>