Vue概念快速整理

Vue概念快速整理

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 的学习难度曲线相对于React来说比较平缓,不过React的灵活性是超过Vue的

Vue的安装

以下推荐国外比较稳定的两个 CDN。

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
• unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

也可以采用npm以及命令行工具的方法穿件项目。Vue.js提供了vue-cli这样的工具用于生成单页项目程序。

npm install --global vue-cli //安装vue-cli
vue init webpack my-project //创建一个新的项目

这样创建完成的项目可以直接运行或者打包, 下面是直接运行，默认用本地的8080端口。

cd my-project
npm install
npm run dev

npm run build

使用npm方式创建的项目有完整的项目文件夹。

采用Vite构建项目，这是官方推荐的Vue3.0的构建方式。

模板语法

Vue使用了基于HTML的模板，可以用声明式的方法将DOM绑定到底层的Vue实例数据上。核心是允许采用简洁的模板语法声明式的将数据渲染金DOM系统中去。

两个非常重的声明语句缩写：

1. v-bind的缩写：

   <!-- 完整语法 -->
   <a v-bind:href="url"></a>
   <!-- 缩写 -->
   <a :href="url"></a>

2. v-on的缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

通过v-model进行数据双向绑定

用户输入

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

复选框控制CSS样式是否显示，属性中的值用v-bind绑定

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

用v-bind绑定数据的另外一个示例

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'Mytest data',
    id : 1
  }
})
</script>

用v-on绑定DOM的事件，演示了点击时的字符串反转功能

<a v-on:click="some-event">

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

filter过滤器

下面的{{ message | capitalize }}用到了一个首字母大写的

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'display the message'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

过滤器可以串联，也可以接受参数

{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2)}}

条件判断和循环

条件语句主要有v-if，v-else，v-else-if等，可以参考一般编程语言的if，else if 和 else的用法

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

循环语句 v-for

Vue3 的组件

Vue的组件可以通过这种层级式组合的方式进行逐步建立。下面是最简单的组件

<div id="app">
    <test></test>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 runoob的新全局组件
app.component('test', {
    template: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')
</script>

组件中加入Prop属性信息，通过title这个属性，就可以来渲染模板。

<div id="app">
  <site-name title="Google"></site-namet>
  <site-name title="Test"></site-namet>
  <site-name title="Taobao"></site-name>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('site-name', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>

Vue3的一些重要功能：

1. 路由

   Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。在React中并没有原生的router，需要通过其他的第三方组件。Vue是通过一个单独的库vue-router提供路由的功能。

   <script src="https://unpkg.com/vue@3"></script>
   <script src="https://unpkg.com/vue-router@4"></script>
    
   <div id="app">
     <h1>Hello App!</h1>
     <p>
       <!--使用 router-link 组件进行导航 -->
       <!--通过传递 `to` 来指定链接 -->
       <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
       <router-link to="/">Go to Home</router-link>
       <router-link to="/about">Go to About</router-link>
     </p>
     <!-- 路由出口 -->
     <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
   </div>
   

2. 混入

3. Ajax

   Vue 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

   <div id="app">
     <h1>网站列表</h1>
     <div
       v-for="site in info"
     >
       {{ site.name }}
     </div>
   </div>
   <script type = "text/javascript">
   const app = {
     data() {
       return {
         info: 'Ajax 测试!!'
       }
     },
     mounted () {
       axios
         .get('https://www.mytest123.com/try/ajax/json_demo.json')
         .then(response => (this.info = response))
         .catch(function (error) { // 请求失败处理
           console.log(error);
       });
     }
   }
    
   Vue.createApp(app).mount('#app')
   </script>