写在前面
上面文章我给大家介绍了 Dapper 这个 ORM 框架的简单使用, 大伙会用了嘛! 本来今天这篇文章是要讲 vue 的快速入门的, 原因是想在后面的文章中使用 Vue 进行这个 CMS 系统的后台管理界面的实现. 但是奈何 Vue 实现的 SPA 有一定的门槛, 不太适合新手朋友, 所以为了照顾大多数人, 我准备还是采用 ASP.NET core mvc+html+JS+CSS+layui 这个传统的技术栈来实现. 但是, 不管怎么说我还是会把 Vue 的基本使用给大伙介绍一下!
当然, 如果这篇文章我也是抱着学习的态度跟大家一起来了解 Vue 的, 如果你想通过这篇文章就能熟练的使用 Vue 那你就太天真了! 目前, 作为后端的我对 Vue 的掌握也仅仅停留在入门阶段. 后期再带着大家一起把这个项目升级到 Vue 吧!
本篇文章已经收纳入《.NET Core 实战项目之 CMS 第一章 入门篇 - 开篇及总体规划》另附上. NET Core 实战项目交流群: 637326624 有兴趣的朋友可以共同交流技术经验.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Hello World
- </title>
- <!-- 开发环境版本, 包含了有帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- <p>
- {{ message }}
- </p>
- <input v-model="message">
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- message: 'Hello World!'
- }
- })
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>Hello World</title>
- <!-- 开发环境版本, 包含了有帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- </head>
- <body>
- <div id="app">
- <p>{{ score }}</p>
- <input v-model="score">
- <div v-if="score>=90">
- </div>
- <div v-else-if="score>=80&&score<90">
- </div>
- <div v-else-if="score>=70&&score<80">
- </div>
- <div v-else-if="score>=60&&score<70">
- </div>
- <div v-else>
- </div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- score: 100
- }
- })
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Hello World
- </title>
- <!-- 开发环境版本, 包含了有帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- <p v-show="score<60">
- 成绩为:{{ score }}不及格了!
- </p>
- <p v-show="score>=60">
- 成绩为:{{ score }}及格了!
- </p>
- <input v-model="score">
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- score: 50
- }
- })
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Hello World
- </title>
- <!-- 开发环境版本, 包含了有帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- <h2>
- 解决问题途径
- </h2>
- <ol>
- <li v-for="method in methods">
- {{ method.name }}
- </li>
- </ol>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- methods: [{
- name: '谷歌'
- },
- {
- name: '必应'
- },
- {
- name: '百度'
- },
- {
- name: '群里问别人'
- }]
- }
- })
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Hello World
- </title>
- <!-- 开发环境版本, 包含了有帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- <style>
- .active { font-size: 20px; color: red; }
- </style>
- </head>
- <body>
- <div id="app">
- <p v-bind:class="{active:isActive}">
- {{ message }}
- </p>
- <input v-model="message">
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- message: 'Hello World!',
- isActive: true
- }
- })
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Hello World
- </title>
- <!-- 开发环境版本, 包含了有帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- </script>
- <style>
- .active { font-size: 20px; color: red; }
- </style>
- </head>
- <body>
- <div id="app">
- <p class="active">
- 您点击了 {{counter}} 次!
- </p>
- <button v-on:click="addCounter">
- 快点我看效果吧!
- </button>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- counter: 0
- },
- methods: {
- addCounter: function() {
- this.counter++;
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: https://www.cnblogs.com/yilezhu/p/10035275.html