初识vue

小灰灰 2022-03-20 13:00 232阅读 0赞

# vue #

我们先认识一下什么是vue？其实就是用来构建用户界面的渐进式框架，vue指令就是操作DOM命令而准备的。安装或引用[vue][]你也可以查[开发文档][Link 1]

先来使用vue输出一个简单的hello word

<!DOCTYPE html>
    <html>
    <head>
         <title>vue</title>
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <div id="app">
           {
       { mes }}
    </div>
    <script> var app = new Vue({ el : "#app", data : { mes : "hello vue" } }) </script>
    </html>

\{ \{ \}\} 这里边keyixie可以写输出格式 也可以写yixiejiande一些简单的js语法 例如：

<!DOCTYPE HTML>
    <html>
    <head>
         <title>vue</title>
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <div id="app">
           {
       { age>18? "成年人" : "未成年"}}
    </div>
    <script> var app = new Vue({ el : "#app", data : { age : "20" } }) </script>
    </html>

也可以写函数

<!ODCTYPE HTML>
    <html>
    <head>
            <title>vue</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <div id="app">
           {
       {  getAge() }}
    </div>
    <script> var app = new Vue({ el : "#app", data : { age : "20" }, methods :{ getAge : function(){ return this.age>18? "成年人" : "未成年" } } }) </script>
    </html>
    数据绑定      //Vue指令语法： v-指令名字+ ：+指令参数 = 指令表达式

当然也少不了跳转啦

<!DOCTYPE HTML>
    <html>
    <head>
            <title>vue</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <div id="app">
             
            <a v-bind:href="url"></a>
    </div>
    <script> var app = new Vue({ el : "#app", data : { url : "https://www.baidu.com" } }) </script>
    </html>

[vue]: https://cn.vuejs.org/
[Link 1]: https://cn.vuejs.org/v2/guide/