一、双向绑定
<body>
<div id="app"> <input type="text" v-model="num">
<h2>{{name}},非常帅!!!有{{num}}个人为他点赞。 </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建 vue 实例
let app = new Vue({
el: "#app", // el 即 element,该 vue 实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三",
num: 5,
}
});
</script>
</body>
双向绑定:
效果:我们修改表单项,num 会发生变化。我们修改 num,表单项也会发生变化。为了实 时观察到这个变化,我们将 num 输出到页面。 我们不需要关注他们为什么会建立起来关联,以及页面如何变化,我们只需要做好数据和视图的关联即可(MVVM)
二、事件处理
<body>
<div id="app"> <input type="text" v-model="num">
<button v-on:click="num++">关注</button>
<h2>{{name}},非常帅!!!有{{num}}个人为他点赞。 </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建 vue 实例
let app = new Vue({
el: "#app", // el 即 element,该 vue 实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三",
num: 5
},
});
</script>
</body>
- 这里用
v-on
指令绑定点击事件,而不是普通的onclick
,然后直接操作 num - 普通 click 是无法直接操作 num 的。
- 未来我们会见到更多 v-xxx,这些都是 vue 定义的不同功能的指令。
简单使用总结:
1)、使用 Vue 实例管理 DOM
2)、DOM 与数据/事件等进行相关绑定
3)、我们只需要关注数据,事件等处理,无需关心视图如何进行修改
三、v-text 和 v-html
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}}
, 加载完毕后才显示正确数据,我们称为插值闪烁。可以使用 v-text 和 v-html 指令来替代{{}} 说明:
- v-text:将数据输出到元素内部,如果输出的数据有 HTML 代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据有 HTML
四、v-bind
html 属性不能使用双大括号形式绑定,我们使用 v-bind 指令给 HTML 标签属性绑定值; 而且在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。
4.1 绑定 class
<div class="static" v-bind:class="{ active: isActive, 'text-danger' : hasError }"> </div>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: true,
hasError: false
}
})
</script>
4.2 绑定 style
v-bind:style
的对象语法十分直观,看着非常像 CSS,但其实是一个 JavaScript 对象。style 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,这种方式记得用单引号括起 来) 来命名。 例如:font-size-->fontSize
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz e + 'px' }"></div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
结果:
4.3 绑定其他任意属性
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontS ize + 'px' }" v-bind:user="userName"> </div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30,
userName: 'zhangsan'
}
})
</script>
效果:
4.4 v-bind 缩写
五、v-for 遍历数据
遍历数据渲染页面是非常常用的需求,Vue 中通过 v-for 指令来实现。
5.1 普通遍历
语法:v-for="item in items"
- items:要遍历的数组,需要在 vue 的 data 中定义好。
item:迭代得到的当前正在遍历的元素
示例:<div id="app"> <ul> <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { users: [{ name: '柳岩', gender: '女', age: 21 }, { name: '张三', gender: '男', age: 18 }, { name: '范冰冰', gender: '女', age: 24 }, { name: '刘亦菲', gender: '女', age: 18 }, { name: '古力娜扎', gender: '女', age: 25 }] }, }) </script>
5.2 带数字角标:
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数: 语法:v-for="(item,index) in items"- items:要迭代的数组
- item:迭代得到的数组元素别名
index:迭代到的当前元素索引,从 0 开始。
5.3 遍历对象
v-for 除了可以迭代数组,也可以迭代对象。语法基本类似 语法:v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"
- 1 个参数时,得到的是对象的属性值
- 2 个参数时,第一个是属性值,第二个是属性名
3 个参数时,第三个是索引,从 0 开始
<div id="app"> <ul> <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { user: { name: '张三', gender: '男', age: 18 } } }) </script>
5.4 KEY
用来标识每一个元素的唯一特征,这样 Vue 可以使用“就地复用”策略有效的提高渲染的效率。<ul> <li v-for="(item,index) in items" :key=”index”></li> </ul> <ul> <li v-for="item in items" :key=”item.id”></li> </ul>
如果 items 是数组,可以使用 index 作为每个元素的唯一标识。
如果 items 是对象数组,可以使用 item.id 作为每个元素的唯一标识。
六、计算属性和侦听器
6.1 计算属性(computed)
某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 示例:
<div id="app">
<ul>
<li>西游记:价格{{xyjPrice}},数量: <input type="number" v-model="xyjNum"></li>
<li>水浒传:价格{{shzPrice}},数量: <input type="number" v-model="shzNum"></li>
<li>总价:{{totalPrice}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
xyjPrice: 56.73,
shzPrice: 47.98,
xyjNum: 1,
shzNum: 1
},
computed: {
totalPrice() {
return this.xyjPrice * this.xyjNum + this.shzPrice * th is.shzNum;
}
},
})
</script>
6.2 侦听(watch)
watch 可以让我们监控一个值的变化。从而做出相应的反应。 示例:
<div id="app">
<ul>
<li>西游记:价格{{xyjPrice}},数量: <input type="number" v-model="xyjNum"></li>
<li>水浒传:价格{{shzPrice}},数量: <input type="number" v-model="shzNum"></li>
<li>总价:{{totalPrice}}</li> {{msg}}
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
xyjPrice: 56.73,
shzPrice: 47.98,
xyjNum: 1,
shzNum: 1,
msg: ""
},
computed: {
totalPrice() {
return this.xyjPrice * this.xyjNum + this.shzPrice * th is.shzNum;
}
},
watch: {
xyjNum(newVal, oldVal) {
if (newVal >= 3) {
this.msg = "西游记没有更多库存了";
this.xyjNum = 3;
} else {
this.msg = "";
}
}
}
})
</script>
6.3 过滤器(filters)
过滤器不改变真正的data
,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的 情况下,过滤器都是有用的,比如尽可能保持 API 响应的干净,并在前端处理数据的格式。
示例:展示用户列表性别显示男女
<body>
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.name}}</td> <!-- 使用代码块实现,有代码侵入 -->
<td>{{user.gender===1? "男":"女"}}</td>
</tr>
</table>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
userList: [{
id: 1,
name: 'jacky',
gender: 1
}, {
id: 2,
name: 'peter',
gender: 0
}]
}
});
</script>
6.3.1 局部过滤器
注册在当前 vue 实例中,只有当前实例能用
let app = new Vue({
el: "#app",
data: {
userList: [ { id: 1, name: 'jacky', gender: 1 }, { id: 2, name: 'peter', gender:0 } ]
},
filters: {
genderFilter(gender) { return gender === 1 ? '男~' : '女~' }
}
});
6.3.2 全局过滤器
// 在创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {
return value.charAt(0).toUpperCase() + value.slice(1)
})
任何 vue 实例都可以使用:
过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
7.组件化
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航,但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部 分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。在 vue 里,所有的 vue 实例都是组件。
7.1 全局组件
我们通过 Vue 的 component 方法来定义一个全局组件。
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义全局组件,两个参数:1,组件名称。2,组件参数
Vue.component("counter", {
template: '<button v-on:click="count++">你点了 我 {{ count }} 次,我记住了.</button>',
data() {
return {
count: 0
}
}
})
let app = new Vue({
el: "#app"
})
</script>
- 组件其实也是一个 Vue 实例,因此它在定义时也会接收:data、methods、生命周期函 数等
- 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有 el 属性。
- 但是组件渲染需要 html 模板,所以增加了 template 属性,值就是 HTML 模板
- 全局组件定义完毕,任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
- data 必须是一个函数,不再是一个对象。
7.2 组件复用
定义好的组件,可以任意复用多次:
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
组件的 data 属性必须是函数!
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。详细了解: 点击这里
7.3 局部组件
一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着 Vue 的加载而加载。 因此,对于一些并不频繁使用的组件,我们会采用局部注册。
我们先在外部定义一个对象,结构与创建组件时传递的第二个参数一致:
const counter = {
template: '<button v-on:click="count++">你点了 我 {{ count }} 次,我记住了.</button>',
data() {
return {
count:0
}
}
};
然后在 Vue 中使用它:
let app = new Vue({
el: "#app",
components: {
counter: counter // 将定义的对象注册为组件
}
})
components 就是当前 vue 对象子组件集合。
- 其 key 就是子组件名称
其值就是组件对象名
效果与刚才的全局注册是类似的,不同的是,这个 counter 组件只能在当前的 Vue 实例 中使用
简写:let app = new Vue({ el: "#app", components: { counter // 将定义的对象注册为组件 } })
八、生命周期钩子函数
8.1 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模 板等等。Vue 为生命周期中的每个状态都设置了钩子函数(监听函数)。每当 Vue 实例处于 不同的生命周期时,对应的函数就会被触发调用。 生命周期:你不需要立马弄明白所有的东西。
8.2 钩子函数
- beforeCreated:我们在用 Vue 时都要进行实例化,因此,该函数就是在 Vue 实例化时调 用,也可以将他理解为初始化函数比较方便一点,在 Vue1.0 时,这个函数的名字就是 init。
- created:在创建实例之后进行调用。
- beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}
- mounted:我们可以将他理解为原生 js 中的 window.onload=function({.,.}),或许大家也在
用 jquery,所以也可以理解为 jquery 中的$(document).ready(function(){….}),他的功能就 是:在 dom 文档渲染完毕之后将要执行的函数,该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{{name}}已被渲染成张三 - beforeDestroy:该函数将在销毁实例前进行调用 。
- destroyed:改函数将在销毁实例时进行调用。
beforeUpdate:组件更新之前。 updated:组件更新之后。
示例:<body> <div id="app"> <span id="num">{{num}}</span> <button v-on:click="num++">赞!</button> <h2>{{name}},非常帅!!!有{{num}}个人点赞。 </h2> </div> </body> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { name: "张三", num: 100 }, methods: { show() { return this.name; }, add() { this.num++; } }, beforeCreate() { console.log("=========beforeCreate============="); console.log("数据模型未加载:" + this.name, this.num); console.log("方法未加载:" + this.show()); console.log("html 模板未加载: " + document.getElementById("num")); }, created: function() { console.log("=========created============="); console.log("数据模型已加载:" + this.name, this.num); console.log("方法已加载:" + this.show()); console.log("html 模板已加载: " + document.getElementById("num")); console.log("html 模板未渲染: " + document.getElementById("num").innerText); }, beforeMount() { console.log("=========beforeMount============="); console.log("html 模板未渲染: " + document.getElementById("num").innerText); }, mounted() { console.log("=========mounted============="); console.log("html 模板已渲染: " + document.getElementById("num").innerText); }, beforeUpdate() { console.log("=========beforeUpdate============="); console.log("数据模型已更新:" + this.num); console.log("html 模板未更新: " + document.getElementById("num").innerText); }, updated() { console.log("=========updated============="); console.log("数据模型已更新:" + this.num); console.log("html 模板已更新: " + document.getElementById("num").innerText); } }); </script>
九、vue 模块化开发
- npm install webpack -g :全局安装 webpack
- npm install -g @vue/cli-init :全局安装 vue 脚手架
- vue init webpack appname :vue 脚手架使用 webpack 模板初始化一个 appname 项目
- npm start = npm run dev :启动项目
npm run build :将项目打包
模块化开发:
运行流程
- 进入页面首先加载 index.html 和 main.js 文件。
- main.js 导入了一些模块【vue、app、router】,并且创建 vue 实例,关联 index.html 页面的元素。使用了 router,导入了 App 组件。并且使用<App/>标签 引用了这个组件
- 第一次默认显示 App 组件。App 组件有个图片和
,所以显示了图片。 但是由于 代表路由的视图,默认是访问/#/路径(router 路径默认使用 HASH 模式)。在 router 中配置的/是显示 HelloWorld 组件。 - 所以第一次访问,显示图片和 HelloWorld 组件。
- 我们尝试自己写一个组件,并且加入路由。点击跳转。需要使用
Go to Foo 标签。Vue 单文件组件
Vue 单文件组件模板有三个部分;<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> h1, h2 { font-weight: normal; } </style>
VSCODE 添加用户代码片段迅速生成vue文件
文件-->首选项-->用户代码片段-->点击新建代码片段--取名 vue.json 确定{ "生成 vue 模板": { "prefix": "vue", "body": [ "<template>", "<div></div>", "</template>", "", "<script>", "//这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json 文件,图片文件等等)", "//例如:import 《组件名称》 from '《组件路径》';", "", "export default {", "//import 引入的组件需要注入到对象中才能使用", "components: {},", "props: {},", "data() {", "//这里存放数据", "return {", "", "};", "},", "//计算属性 类似于 data 概念", "computed: {},", "//监控 data 中的数据变化", "watch: {},", "//方法集合", "methods: {", "", "},", "//生命周期 - 创建完成(可以访问当前 this 实例)", "created() {", "", "},", "//生命周期 - 挂载完成(可以访问 DOM 元素)", "mounted() {", "", "},", "beforeCreate() {}, //生命周期 - 创建之前", "beforeMount() {}, //生命周期 - 挂载之前", "beforeUpdate() {}, //生命周期 - 更新之前", "updated() {}, //生命周期 - 更新之后", "beforeDestroy() {}, //生命周期 - 销毁之前", "destroyed() {}, //生命周期 - 销毁完成", "activated() {}, //如果页面有 keep-alive 缓存功能,这个函数会触发 ", "}", "</script>", "<style lang='scss' scoped>", "//@import url($3); 引入公共 css 类", "$4", "</style>" ], "description": "生成 vue 模板" } }
导入 element-ui 快速开发
1、安装 element-ui: npm i element-ui
2、在 main.js 中引入 element-ui 就可以全局使用了。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3、将 App.vue 改为 element-ui 中的后台布局
4、添加测试路由、组件,测试跳转逻辑
(1) 、参照文档 el-menu 添加 router 属性
(2) 、参照文档 el-menu-item 指定 index 需要跳转的地址© 版权声明文章版权归作者所有,未经允许请勿转载。THE END喜欢就支持一下吧版权属于:levis作品采用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权 - 第一次默认显示 App 组件。App 组件有个图片和
评论 (0)