Vue.js安装和三个操作小案列

Vue.js安装

1 安装Vue

1.方式一:直接CDN引入


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script src="https://cdn.jsdelivr.net/npm/vue">script>

2.下载和引入

​ 开发环境 https://vuejs.org/js/vue.js

​ 生产环境 https://vuejs.org/js/vue.min.js

3. NPM安装

​ 通过webpack和CLI使用的时候,我们使用该方式

Vue案例

Hello Vuejs


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
   
head>
<body>
    <div id="app">
        <h1>{{name}}h1>
        <h2>{{message}}h2>
    div>
    <script src="vue.js">script>
    <script>
        // let(ES6中用来定义变量)   const(ES6中定义常亮的) 
        // 在ES6中不用var var有三个缺陷
        // 1 var定义的变量没有块作用域
        // 2 var定义的全局变量会自动添加全局window对象的属性
        // 3 var定义的变量会提前装载。
        //   编程范式,声明式编程
        const app = new Vue({
            el : '#app',  //用于要挂载要管理的元素
            data : {    //定义数据
            name:'Hello',
                message : 'Vuejs'
            }
        })
    script>
body>
html>
1 el属性

该属性决定了这个Vue对象挂载到哪一个元素上,上面,我们挂载到了id为app的元素上

2 data属性

​ 该属性通常会存储一些数据

1 这些数据可以是我们自己定义出来的
2 这些数据也可以是从服务器加载的

列表数据


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}li>
        ul>
    div>
    <script src="vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['星际争霸', '星际穿越', '魔兽争霸'],
            }
        })
    script>
body>

html>

计数器

methods : 该属性用于在vue对象中定义新的方法


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <h2>当前数字{{counter}}h2>
        <button v-on:click="add">+button>
        <button v-on:click="sub">-button>
    div>

    <script src="vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter : 0
            },
            methods: {
                add: function () {
                    console.log('add被执行');
                    this.counter++
                },
                sub:function(){
                    console.log('sub被执行');
                    this.counter--
                }
            }
        })
    script>
body>

html>

你可能感兴趣的:(vue.js)