本文共 3622 字，大约阅读时间需要 12 分钟。

本篇文章是介绍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、代码

   
    
    
        {
  {title}}    
    
    
        名称：        库存：        添加    
    
    
        
     
            {
  {item.name}}            库存：{
  {item.stock}}        
    
    
   

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实例控制的页面片段

为了提高渲染效率，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM

2、模板书写到哪？

1、在挂载的元素内部直接书写

2、在template配置中书写

3、在render配置中用函数创建

3、模板中写什么？

1、静态内容

2、插值：{

{JS表达式}}，mustache语法

3、指令

1. v-html：绑定元素的 innerHTML
2. v-bind：属性名：绑定属性@
3. v-on:时间名：绑定事件
4. v-if：判断元素是否需要渲染
5. v-show：判断元素是否应该显示
6. v-for：用于循环生成元素
7. v-bind: key:用于帮助中重新渲染时元素的对比，通常和v-for配合使用，以提高渲染效率。（尽量使用ID）
8. v-model:语法糖，用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件。

   添加-------------------------------------------------------
   {
  {text}}-------------------------------------------------------: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:配置计算属性

计算属性和方法的区别：

1. 计算属性使用时，是当成属性使用，而方法是需要调用的
2. 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算。
3. 计算属性可以当成属性赋值

//	计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算。
   
    
    
             姓：{
  {firstName}}        名：{
  {lastName}}        姓名：{
  {fullName}}    
    
    
    
        全名：{
  {fullName}}    
    
    
        全名：{
  {fullName}}    
    
    
        全名：{
  {fullName}}    
    
    
        全名：{
  {fullName}}    
    
    
        全名：{
  {getfullName()}}    
    
    
        全名：{
  {getfullName()}}    
    
    
        全名：{
  {getfullName()}}    
    
    
        全名：{
  {getfullName()}}    
   
==============================================================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);        }    }},===================================================    
       
       
       
   
   
    
    
        {
  {title}}    
    
    
        名称：        库存：        
             添加    
    
    
没有商品
    
    
        
     
            {
  {item.name}}            库存：{
  {item.stock}}            删除        
    
    
    
    
        商品总数：{
  {products.length}}, 总库存:{
  {totolStock}}    
   

转载地址：http://wzabi.baihongyu.com/