vue.js入门教程、安装、实例化vue、模板语法_为什么引入了vue.js文件后还要实例化-CSDN博客

本文链接：https://blog.csdn.net/newperso/article/details/108629656

Vue教程

vue.js安装

下载vue.js
在vue.js官网下载vue.min.js,使用script标签src属性引入vue.min.js文件。
使用CDN方法
- https : //cdn.staticfile.org/vue/2.2.2/vue.min.js
- https : //unpkg.com/vue/dist/vue.js
- https : //cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
NPM方法
在使用vue.js构建大型应用时推荐使用NPM安装

$ cnpm install vue
// 查看版本
$ npm -v

vue.js起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

let vm=new Vue({
    el: ,
    data:{

    }
    //...
})
 el:表示DOM中的id 指定模板
 data:用于定义属性
 methods:用于定义函数，可以通过return返回函数值。
 {{}}:用于输出对象属性和函数返回值，模板渲染

实例

<body>
    <div id="app">{{msg}}</div>
    <button @click="say">点我</button>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                msg:'hello world'
            },
            methods:{
                say(){
                    alert("hello");
                }
            }
        })
    </script>
</body>

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

vue.js模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值

插入文本
数据绑定最常见的形式就是使用 {{xx}}形式的文本插值：

<div id="app">
<p>{{msg}}</p>
</div>

插入html
使用 v-html 指令用于输出 html 代码：

<body>
   <div id="app">
       <div v-html="msg"></div>
   </div>    
   <script>
       new Vue({
          el: '#app',
           data: {
           msg: '<h1>hello</h1>'
           }
       })
   </script>
</body>

插入属性
HTML 属性中的值应使用 v-bind 指令。

<style>
   .color {
       color:red;
   }
   .size {
       font-size:30px;
   }
</style>
<body>
   <div id="app">
       <div v-bind:class="{color:true}">hello world</div>
       <div :class="{color:true}">hello world</div>
       <div :class="{color:true,size:false}">hello {{msg}}</div>
       <div :class="[{color:false},{size:true}]">hello world</div>
   </div>
   <script>
       let vm=new Vue({
           el:'#app',
           data:{
               msg:'world'
           },
           methods:{
               
           }
       })    
   </script>
</body>

如果color和size判断为true则使用他们的样式，否则不使用该类的样式

插入表达式
Vue.js提供了完全的 JavaScript 表达式支持。

<div id="app">
   {{5+5}}<br>
   {{ flag ? 'YES' : 'NO' }}<br>
   {{ msg.split('').reverse().join('') }}
   <div v-bind:id="'list-' + id">hello</div>
 </div>
 <script>
    new Vue({
        el: '#app',
        data: {
            flag: true,
            msg: 'RUNOOB',
            id : 1
        }
    })
 </script>

指令
指令是带有 v- 前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

<div id="app">
    <h3>hello</h3>
    <div v-if="flag">欢迎您</div>
    <div v-else>请登录</div>
   <div v-show="flag">{{msg}}</div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'world',
            flag: true
        },
        methods: {}
    })
    setTimeout(() => {
        vm.flag = false
    }, 3000)
</script>

如果flag为true则显示欢迎您，为false则显示请登录。v-show同理，具体差异可自行查阅

参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

<div id="app">
    <a :href=url target="blank">{{msg}}</a>
</div>
<script>
    new Vue({
        el: '#app',
       data: {
            msg: '我的博客',
            url: 'https://blog.csdn.net/newperso'
        }
   })
</script>

事件监听
v-on 指令，它用于监听 DOM 事件，也可简写为@事件

 <div id="app">
     <button @click="sayHello">{{msg}}</button>
 </div>
 <script>
     new Vue({
         el: '#app',
         data: {
             msg: '点我'
         },
         methods: {
            sayHello() {
                 alert("hello world")
             }
         }
     })
 </script>