第一章 vue入门
本篇文章是介绍vue的入门知识，记录了作者学习过程中的一些收获和遇到的坑，后续会更新，敬请期待。。。1、vue官方网站：https://cn.vuejs.org2、什么是vuevue是一个前端开发框架，用于降低UI复杂度UI：user interface用户界面3、vue的特点渐进式响应式组件化4、体验vue代码开发工具：visual studio code常用插件Auto Rebane Tag:
·
本篇文章是介绍vue的入门知识，记录了作者学习过程中的一些收获和遇到的坑，后续会更新，敬请期待。。。
1、vue官方网站：
https://cn.vuejs.org
2、什么是vue
vue是一个前端开发框架，用于降低UI复杂度
UI：user interface用户界面
3、vue的特点
渐进式
响应式
组件化
4、体验vue代码
开发工具：visual studio code
常用插件
Auto Rebane Tag:能够自动更改结束标签
Live Server:自动搭建本地服务器
Prettier -Code formatter: 代码美化
Vetur:但vue组件格式支持
vscode-icons:美化文件图标
5、两种学习的途径
6、使用工具及插件
Visual Studio
坑一：run code 乱码解决方案：安装node.js，重启。
7、代码
<div id="app">
<h1>
{{title}}
</h1>
<p>
名称：<input type="text" v-model="newProduct.name">
库存：<input type="number" v-model="newProduct.stock" type="number">
<button @click="addProduct">添加</button>
</p>
<ul>
<li v-for="(item,i) in products" :key="1">
{{item.name}}
库存：{{item.stock}}
</li>
</ul>
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
// 配置
el:"#app", //配置模板
data: {
// 配置数据
title: "商品管理",
newProduct:{
name:"默认名称",
stock:10,
},
products: [
{name:"iphone", stock: 10},
{name:"xioami", stock: 20},
{name:"huawei", stock: 0},
],
},
methods:{
addProduct(){
// console.log("addProduct")
this.products.push({
name: this.newProduct.name,
stock: this.newProduct.stock
})
}
}
});
// vm.$mount("#app");
</script>
8、ES6知识补充
// 1、速写属性
var name = "abc";
var age = 13;
var obj = {
name,
age,
};
console.log(obj);
// 2、速写方法
var obj = {
name: "张三",
sayHello() {
console.log(this.name);
},
};
obj.sayHello();
// 3、箭头函数
var obj = {
name: "程程",
sayHello: function (){
// setInterval(function () {
//箭头函数，一定绑定obj。
setInterval( () => {
console.log(this.name);
},1000);
},
};
obj.sayHello();
var func = function (a,b) {
return a + b;
}
// 一个返回语句可以省略大括号
var func = (a,b) => a + b;
console.log(func(3,4));
//一个参数可以省略小括号
var func = a => a*2;
console.log(func(8));
// 4、模板字符串
var name = "成哥";
var age = 18;
var str = `姓名：${name},年龄：${age}`;
// 模板字符串可以换行，以前默认""不能换行，模板字符串是反单引号。
//相当于
// str = "姓名：" + name + ",年龄：" + age;
console.log(str);
9、vue实例（干货、细节！！！）
9.1 结构
通过new Vue({…})创建的对象
配置对象中的部分内容会被提取到vue实例中：
data
props
methods
computed
9.2 挂载
让vue实例控制网页中某个区域的过程，称之为挂载。
挂载的方式：
1、通过el:"css选择器"进行配置
2、通过vue实例.$mount(“css选择器”)进行配置
9.3 模板
被vue实例控制的页面片段
1、模板的作用是什么？
为了提高渲染效率，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM
2、模板书写到哪？
1、在挂载的元素内部直接书写
2、在template配置中书写
3、在render配置中用函数创建
3、模板中写什么？
1、静态内容
2、插值：{{JS表达式}}，mustache语法
3、指令
- v-html：绑定元素的
innerHTML- v-bind：属性名：绑定属性@
- v-on:时间名：绑定事件
- v-if：判断元素是否需要渲染
- v-show：判断元素是否应该显示
- v-for：用于循环生成元素
- v-bind: key:用于帮助中重新渲染时元素的对比，通常和v-for配合使用，以提高渲染效率。（尽量使用ID）
- v-model:语法糖，用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件。
<!-- <button @click="addProduct">添加</button> -->
<button v-on:click="addProduct">添加</button>
-------------------------------------------------------
<!-- <a v-bind:href="link">{{text}}</a> -->
<a :href="link">{{text}}</a>
-------------------------------------------------------
:value="text"
@input="text=$event.target.value"
相当于v-model="text" 语法糖简化
4、模板中的代码环境
模板中所有的JS代码，它的环境均为vue实例，例如{{title}},得到的结果相当于是vue实例.title
9.4 配置对象
1、data:数据
2、template:字符串，配置模板
3、el:配置挂载的区域
4、methods:配置方法
5、computed:配置计算属性
计算属性和方法的区别：
- 计算属性使用时，是当成属性使用，而方法是需要调用的
- 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算。
- 计算属性可以当成属性赋值
// 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算。
<div id="app">
<div>
姓：{{firstName}}
名：{{lastName}}
姓名：{{fullName}}
</div>
<p>
全名：{{fullName}}
</p>
<p>
全名：{{fullName}}
</p>
<p>
全名：{{fullName}}
</p>
<p>
全名：{{fullName}}
</p>
<p>
全名：{{getfullName()}}
</p>
<p>
全名：{{getfullName()}}
</p>
<p>
全名：{{getfullName()}}
</p>
<p>
全名：{{getfullName()}}
</p>
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
firstName: "袁",
lastName: "进"
},
// 计算属性
computed: {
fullName(){
console.log("计算属性fullName")
return this.firstName + this.lastName;
}
},
// 调用方法执行时用fullName()
methods: {
getfullName(){
console.log("调用方法")
return this.firstName + this.lastName;
}
}
});
</script>
==============================================================
computed: {
fullName:{
// console.log("计算属性fullName")
// return this.firstName + this.lastName;
get() {
console.log("计算属性fullName");
return this.firstName + this.lastName;
},
set(val) {
console.log("计算属性赋值了")
this.firstName = val[0];
this.lastName = val.substr(1);
}
}
},
===================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- <div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:"hello vue.js!"
}
})
</script> -->
<div id="app">
<h1>
{{title}}
</h1>
<p>
名称：<input type="text" v-model="newProduct.name">
库存：<input type="number" v-model="newProduct.stock" type="number">
<!-- <button @click="addProduct">添加</button> -->
<button v-on:click="addProduct">添加</button>
</p>
<h2 v-if="products.length===0">没有商品</h2>
<ul v-else>
<li v-for="(item,i) in products" :key="1">
{{item.name}}
库存：{{item.stock}}
<button @click="handleDelete(i)">删除</button>
</li>
</ul>
<p>
商品总数：{{products.length}}, 总库存:{{totolStock}}
</p>
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
// 配置
el:"#app", //配置模板
// template:`
// <div id="app">
// <h1>
// {{title}}
// </h1>
// <p>
// 名称：<input type="text" v-model="newProduct.name">
// 库存：<input type="number" v-model="newProduct.stock" type="number">
// <button @click="addProduct">添加</button>
// </p>
// <ul>
// <li v-for="(item,i) in products" :key="1">
// {{item.name}}
// 库存：{{item.stock}}
// </li>
// </ul>
// </div>`,
// render(createElement) {
// return createElement("h1",["abc"]);
// },
data: {
// 配置数据
title: "商品管理",
newProduct:{
name:"默认名称",
stock:10,
},
products: [
{name:"iphone", stock: 10},
{name:"xioami", stock: 20},
{name:"huawei", stock: 0},
],
},
computed: {
totolStock(){
// var sum = 0;
// for (var i = 0; i < this.products.length;i++) {
// sum += +this.products[i].stock;
// }
// return sum;
// var sum = 0;
// for (p of this.products) {
// sum += +p.stock;
// }
// return sum;
return this.products.reduce((a,b)=>{
return a + (+b.stock);
},0)
},
},
methods:{
addProduct(){
// console.log("addProduct")
this.products.push({
name: this.newProduct.name,
stock: this.newProduct.stock
});
},
handleDelete(i){
this.products.splice(i,1);
}
}
});
// vm.$mount("#app");
</script>
</body>
</html>
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)