谷粒商城微服务分布式基础篇五——Vue语法

最新推荐文章于 2024-07-21 19:21:16 发布
最新推荐文章于 2024-07-21 19:21:16 发布
阅读量250 收藏
点赞数
分类专栏： Gulimall
原文链接：https://blog.csdn.net/D_A_I_H_A_O/article/details/105450740
版权

文章目录

前端开发 Vue

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

Vue中文文档，具体学习还是官方好：https://cn.vuejs.org/

Vscode创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：自定义文件名

{
	"vue htm": {
	//作用范围，删除即全局
		"scope": "html",
		//prefix固定的-自定义快捷键
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

   
   

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

保存好，新建一个html文件输入之前定义的快捷键vuehtml然后tab即可以快速生成代码片段

v-bind

被称为指令。指令带有前缀 v- 。
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

data: {
    message: '页面加载于 ' + new Date().toLocaleString()
}

   
   

   
   
  • 1
  • 2
  • 3
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令，此时title中显示的是模型数据-->
<h1 v-bind:title="message">我是标题</h1>

<!– v-bind 指令的简写形式： 冒号（:） –>
<h1 :title=“message”>我是标题</h1>

  • 1
  • 2
  • 3
  • 4
  • 5

v-model

双向数据绑定，会根据控件类型自动选取正确的方法来更新元素

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
输入：DAIHAO
Message is: DAIHAO

 
 

 
 
  • 1
  • 2
  • 3
  • 4

还可以绑定很多
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件

v-on

监听 DOM 事件，并在触发时运行一些 JavaScript 代码

<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>

 
 

 
 
  • 1
  • 2
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

 
 

 
 
  • 1
  • 2

v-if

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

 
 

 
 
  • 1

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

 
 

 
 
  • 1
  • 2

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

 
 

 
 
  • 1

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 元素，也不支持 v-else。

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for

可以绑定数组的数据来渲染一个项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
el: ‘#app-4’,
data: {
todos: [
{ text: ‘学习 JavaScript’ },
{ text: ‘学习 Vue’ },
{ text: ‘整个牛项目’ }
]
}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。

遍历数组，使用计算属性
data: {
    numbers: [1, 2, 3, 4, 5]
}

 
 

 
 
  • 1
  • 2
  • 3
<!-- 2、遍历数组，使用计算属性 -->
<ul>
    <li v-for="n in numbers">{{ n }}</li>
</ul>
<ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
</ul>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
computed：计算属性，和data定义在同一级别
// 计算属性：这里的数据是通过某种方式计算出来的
computed: {
    evenNumbers() {
        console.log('计算属性 evenNumbers')
        // filter：遍历numbers，并返回满足条件的值，放在一个数组中
        return this.numbers.filter(function (number) {
            return number % 2 === 0
        })
    }
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
遍历数据列表
data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

<!– 3、遍历数据列表 –>
<table border=“1”>
<!– <tr v-for=“item in userList”></tr> –>
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
遍历对象
data: {
    user:{
        id: 1,
        username: 'helen',
        age: 18
    }
}

<!– 4、遍历对象 –>
<!– 直接访问 –>
<form action="">
<p><label>id：<input type=“text” v-model=“user.id”></label></p>
<p><label>用户名：<input type=“text” v-model=“user.username”></label></p>
<p><label>年龄：<input type=“text” v-model=“user.age”></label></p>
</form>

<!– 遍历 –>
<form action="">
<!– <p v-for=“value in user”> –>
<p v-for="(value, key, index) in user">
<label>{{index}}-{{key}}：<input type=“text” v-model=“value”></label>
</p>
</form>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

计算属性

差值模板中使用js表达式
data: {
    message: '上海自来水来自海上 haha'
}
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
<p>原始值: "{{ message }}"</p>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
<!-- 1、插值数据绑定中使用表达式 -->
<p>反转消息: {{ message.split('').reverse().join('') }}</p>
所以，对于任何复杂逻辑，你都应当使用计算属性

 
 

 
 
  • 1
  • 2
  • 3
使用计算属性
例2：使用计算属性
computed: {
    reversedMessage () {
        return this.message.split('').reverse().join('')
    }
}

<!– 2、使用计算属性 –>
<p>反转消息: “{{ reversedMessage }}”</p>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
使用方法
例3：使用方法
methods:{
    reversed () {
        return this.message.split('').reverse().join('')
    }
}

<!– 3、使用方法 –>
<p>反转消息: “{{ reversed() }}”</p>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？

计算属性缓存 vs 方法

计算属性基于缓存：在相关依赖发生改变时它们才会重新求值。
方法将总会再次执行
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 计算！如果你不希望有缓存，请用方法来替代。

<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: "{{ reversedMessage }}"</p>

 
 

 
 
  • 1
  • 2
  • 3
  • 4

​

<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: "{{ reversed() }}"</p>

 
 

 
 
  • 1
  • 2
  • 3
  • 4

侦听属性

当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

data: {
    firstName: '道格拉斯',
    lastName: '狗剩'
    fullName: '道格拉斯 狗剩' 
},

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
watch: {
    firstName(val){
        console.log('firstName changed...')
        this.fullName = val + ' ' + this.lastName
    },

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

​

    lastName(val){
        console.log('lastName changed...')
        this.fullName = this.firstName + ' ' + val
    }
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
<label>名：<input type="text" v-model="firstName"></label>
<label>姓：<input type="text" v-model="lastName"></label>
{{fullName}}

 
 

 
 
  • 1
  • 2
  • 3

实际上，上一个例子是对 watch 的滥用。我们完全可以用计算属性更高效的完成同样的操作

data: {
    firstName: '道格拉斯',
    lastName: '狗剩'
    // fullName: 'Foo Bar' //既然fullName需要被计算，那么将此属性放在计算属性中
},

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
computed: {
    fullName () {
        return this.firstName + ' ' + this.lastName
    }
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

例3：

<p>
    Ask a yes/no question:
    <input v-model="question">
    <button @click="getAnswer()">提问</button>
</p>
<p>{{ answer }}</p>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var app = new Vue({
    el: '#app',
    data: {
        question: '',
        answer: '请提问!'
    },
    methods: {
        getAnswer: function () {
​
            this.answer = '我想想...'
            var vm = this
            $.ajax({
                url: 'https://yesno.wtf/api',
                type: 'get',
                success(data) {
                    // console.log(this);
                    vm.answer = data.answer
                },
                error (error) {
                    vm.answer = '网找不到API接口. ' + error
                }
            })
        }
    }
})

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

使用watch：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
        this.answer = '等待您停止输入...'
        this.getAnswer()
    }
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

过滤器

局部过滤器

例1：局部过滤器

data: {
    userList: [
        {id: 1, name: 'peter', gender: 1},
        {id: 2, name: 'helen', gender: 0}
    ]
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

使用if指令判断

<table border="1">
    <tr v-for="item in userList">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <!-- <td>{{item.gender}}</td> -->
        <td>
            <span v-if="item.gender === 1">男</span>
            <span v-else>女</span>
        </td>
    </tr>
</table>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

使用过滤器

// filters 定义局部过滤器，只可以在当前vue实例中使用
filters: {
    genderFilter(gender) {
        return gender === 1 ? '男' : '女'
    }
}
<td>
    <!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
    {{item.gender | genderFilter}}
</td>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
全局过滤器

例2：全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
    return value.charAt(0).toUpperCase() + value.slice(1)
})

 
 

 
 
  • 1
  • 2
  • 3
  • 4

应用全局过滤器

<td>{{item.name | capitalize}}</td>
定义另一个vue实例
var app2 = new Vue({
    el: '#app2',
    data: {
        user: { id: 3, name: 'annie', gender: 0 }
    }
})
<div id="app2">
    <!-- 全局过滤器可以应用在不同的vue实例的渲染范围中 -->
    {{user.name | capitalize}}
    <!-- 局部过滤器则不可以，只能应用在定义的vue实例中 -->
    {{user.gender | genderFilter}}
</div>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

组件

通常一个应用会以一棵嵌套的组件树的形式来组织

在这里插入图片描述
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：

Vue.component('my-component-name', {
  // ... options ...
})

 
 

 
 
  • 1
  • 2
  • 3

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中

Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

 
 

 
 
  • 1
  • 2
  • 3
  • 4
组件的复用

你可以将组件进行任意次数的复用：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

data 必须是一个函数
当我们定义这个 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
return {
count: 0
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
组件注册
组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', { /* ... */ })

 
 

 
 
  • 1

该组件名就是 Vue.component 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

组件名大小写

定义组件名的方式有两种：

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

 
 

 
 
  • 1

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

 
 

 
 
  • 1

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

全局注册

到目前为止，我们只用过 Vue.component 来创建组件：

Vue.component('my-component-name', {
  // ... 选项 ...
})

 
 

 
 
  • 1
  • 2
  • 3

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: ‘#app’ })
<div id=“app”>
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

 
 

 
 
  • 1
  • 2
  • 3

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
components: {
‘component-a’: ComponentA
},
// …
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
components: {
ComponentA
},
// …
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称
包含了这个组件选项的变量名

钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。


> 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或
> vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this
> 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property
> of undefined 或 Uncaught TypeError: this.myMethod is not a function
> 之类的错误。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

1、创建vue文件夹
2、复制js资源

vue.min.js
vue-router.min.js

 
 

 
 
  • 1
  • 2

3、创建 路由.html
4、引入js

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

 
 

 
 
  • 1
  • 2

5、编写html

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/logout">注销</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

6、编写js

<script>
    // 1. 定义（路由）组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>login list</div>' }
    const Teacher = { template: '<div>logout list</div>' }
​
    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/login', component: Login },
        { path: '/logout', component: Logout }
    ]
​
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })
​
    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router
    })
​
    // 现在，应用已经启动了！
</script>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

vue-cli

使用vue-cli快速创建一个基于webpack模板的项目

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

在这里插入图片描述Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
详细安装使用参考[https://www.cnblogs.com/mapengfei247/p/11074429.html]

element-ui

饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

安装element-ui

npm install element-ui -S
S代表save 安装到本地开发者环境中
检查一下package.json看看是否安装成功，如果有element-ui 表示安装成功

 
 

 
 
  • 1
  • 2
  • 3

在这里插入图片描述
在main.js里面引入导入element-ui

import Element from 'element-ui'
import './styles.scss'
Vue.use(Element)//全局使用ElementUI

 
 

 
 
  • 1
  • 2
  • 3

一般流程-cv大法：

找想要的样式组件
复制代码到对应的.vue文件
修改对应的数据

 
 

 
 
  • 1
  • 2
  • 3

Element中文文档

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>
hi163hello
关注
专栏目录
谷粒商城之分布式基础（二）
生命不息，编程不止的博客
11-20 1138
谷粒商城之分布式基础（二）
2020谷粒商城微服务kubernetes分布式实战
kubernetes中文社区
08-07 1153
目录：/IT-2417-谷粒商城2020分布式 [18.1G] ┣━━1.分布式基础篇 [7.4G] ┃ ┣━━视频 [7.4G] ┃ ┃ ┣━━[IT视频自学网-www.itspzx.com]_收集整理.url [175B] ┃ ┃ ┣━━01、简介-项目介绍 [96.4M] ┃ ┃ ┣━━02、简介-项目整体效果展示 [148.8M] ┃ ┃ ┣━━03、简介-分布式基础概念 .
《谷粒商城》2020基础篇前端vue模板代码及图片
11-23
此资源为与视频匹配的基础篇前端vue模板代码及后台系统所需图片资源。 项目采用SpringCloudAlibaba技术栈。由业务集群系统+后台管理系统构成，打通了微服务分布式开发及全栈开发技能，包含前后分离全栈开发、Restful接口、数据校验、网关、注册发现、配置中心、熔断、限流、降级、链路 追踪、性能监控、压力测试、系统预警、集群部署、持续集成、持续部署... 包括前台商城系统以及后台管理系统，基于 SpringCloud + SpringCloudAlibaba + MyBatis-Plus等技术实现。
谷粒商城VUE模板设置
Vacuum499的博客
05-31 196
Vscode中选择设置->user Snippets->搜索框中选择vue或者vue.json，然后将自己的模板复制上去，使用的时候输入vue回车便可用。
谷粒商城实战笔记-43-前端基础-Vue-使用Vue脚手架进行模块化开发
最新发布
epitomizelu的专栏
07-21 1686
为了加深理解，我们可以自定义一个组件，并配置路由。
谷粒商城P44的Vue模板
gezq0714的博客
06-12 291
Vue模板 { "生成vue模板": { "prefix": "vue", "body": [ "<template>", "<div></div>", "</template>", "", "<script>", "// 这里可以导入其他文件（如：组件、工具js，第三方插件js、图片文件等", "// 例如：import 《组件名称》 from '《组件路径》';", "", "export d
谷粒商城-vue模板内容
fg89817380的博客
07-04 2331
谷粒商城-vue模板内容： { "生成vue模板": { "prefix": "vue", "body": [ "<template>", "<div></div>", "</template>", "", "<script>", "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）", "//例如：import 《组件名称》 from '《组件路径》';
谷粒商城之Vue框架学习
weixin_56674682的博客
12-08 1377
基本语法和插件安装 快速入门：介绍 — Vue.js 我们学习的是vue2.x版本 vue的安装： ①使用src进行引入 ② 使用npm进行安装 1.vscode 创建一个文件夹，进行一个初始化 npm init -y 生成package.json文件进行一个包的管理 2.使用npm install vue命令，安装vue npm install vue Vue的使用 ①导入vue 实现了一个单向的绑定，修改数据页面...
谷粒商城基础篇——Day01
wu6426的博客
04-29 1969
01、分布式基础&项目环境搭建 一、项目简介 1. 项目背景 1.1 电商模式 市面上有 5 种常见的电商模式 B2B、B2C、C2B、C2C、O2O 1) B2B 模式 B2B(Business to Business)，是指商家和商家建立的商业关系，如 阿里巴巴 2) B2C 模式 B2C(Business to Consumer) 就是我们经常看到的供应商直接把商品卖给用户，即 “商对客” 模式，也就是通常所说的商业零售，直接面向消费者销售产品和服务，如苏宁易购，京东，天猫，小米商城 3) C
谷粒商城基础篇
apple_52138126的博客
03-06 2696
大哥的笔记
谷粒商城2020学习记录
qq_37805900的博客
05-21 5274
谷粒商城2020学习记录 视频链接
微服务分布式电商项目《谷粒商城》-- 前端基础 -vue
qq_42678055的博客
02-01 281
这里写目录标题一级目录二级目录三级目录学习目标：学习内容：学习时间：学习产出： 一级目录 初始化项目： 安装vue依赖： 声明式渲染： <script src="./node_modules/vue/dist/vue.js"></script> <div id="app"> <h1>{{name}},好看</h1> </div> <script> let
谷粒商城，vue上传文件代码
CSDN_lin2018的博客
11-18 512
谷粒上传商城，vue上传文件代码
谷粒商城《五》Vue基本语法
weixin_44957983的博客
05-19 179
MVVM：把View和Model通过ViewModel绑定起来，也就是当Model有数据改动时会通过ViewModel设置到界面中，View有表单改动时，就通过ViewModel设置到Model中。
谷粒商城vue模板生成代码
ym563099457的博客
06-03 676
1.文件--shou'x
谷粒商城Vue 笔记
weixin_56362639的博客
06-24 409
谷粒商城Vue 笔记
谷粒商城 (九) --------- 前端基础 Vue 篇
在森林里麋了鹿
09-04 483
Vue的相关入门
谷粒商城 day7 前端vue
be_lxx1的博客
03-08 512
MVVM思想 VUE 声明式渲染功能 实例 只要说明vue管控的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid.
Vue.js教程：基础篇详解
"Vue教程基础篇" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。本教程将概述Vue的基础知识，包括指令、数据绑定、生命周期钩子、单向数据流以及计算属性与方法的区别。 1. **v-bind、v-model、v-html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值