vue学习(1)

今天开始学习前端高级课程——vue

以下内容是老师课上讲解+自己的理解整理的,有不合理的地方还请多多指教!

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。

声明式渲染

1,文本插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">{{message}}</div>
    <script > 
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello vue'
        }
    })
    
    </script>
</body>
</html>

这是我的第一个vue代码,通过script链入vue地址:https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

然后在div中直接提取数据(data)

vue只关心视图,而我们就只从数据下手就可以了

js变量 app 就是Vue创建的一个对象，可以理解成把<div id="app"></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象，这个对象就是app

el是Vue的保留字，用来指定实例化的DOM的ID号, #app这句话就是标签选择器，告诉Vue要实例化ID=“app”的这个标签。

dom

这是vue中最简单的一种数据渲染方式——声明式渲染

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

2,绑定一个title属性

最简单的静态title,就是在标签后加上title=" "

若想实现一个动态的title例如时间,则需要v-bind:title=""

<div v-bind:title="aaa" id="app">{{message}}</div>
    <script > 
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello vue',
            aaa:'页面加载于 ' + new Date().toLocaleString()
        }
    })
    
    </script>

这样就会出现一个时间的动态title,就是鼠标移动上去显示的元素

条件,v-if

控制切换一个元素是否显示

v-if="seen",data中创建一个seen="true"

<p v-if="seen">条件</p>在页面中是可以看见这个"条件"的,然后我们在控制台中将seen的值修改为"false",刷新页面,"条件"消失了.

循环,v-for

数据库中数据量较大,使用v-for较为方便

<div v-bind:title="aaa" id="app" >
        <ol>
            <li v-for="ms in movies">《{{ms}}》</li>
        </ol>
    </div>
    <script > 
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello vue',
            aaa:'页面加载于 ' + new Date().toLocaleString(),
            movies:[
                '唐人街探案',
                '唐人街探案2',
                '唐人街探案3',
            ]
        }
    })
    
    </script>

这里若想在后台之中修改数据,必须使用数组方法

处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

我们将这两个指令结合一下,实现一个输入框,用户在输入框中输入的内容,将被添加到movies中,并在页面显示

这个功能需要我们先理清思路:

v-on后面可以添加事件监听器,使用v-model可以将输入的数据传到一个数组中

我们可以定义一个input,加上v-on:blur失去焦点事件,执行v-model:"",输入框失去焦点时将输入的内容传到一个数组中

再通过methods定义一个函数,将传输内容的数组,添加到movies中,就可以实现输入的内容显示在上面了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div v-bind:title="aaa" id="app" >
        <ol>
            <li v-for="ms in movies">《{{ms}}》</li>
        </ol>
        <input type="text" v-on:blur="addMovie" v-model="newMovie">
    </div>
    <script > 
    var app=new Vue({
        el:'#app',
        methods:{
            addMovie(){
                this.movies.push(this.newMovie)
            }
        },
        data:{
            message:'hello vue',
            aaa:'页面加载于 ' + new Date().toLocaleString(),
            movies:[
                '唐人街探案',
                '唐人街探案2',
                '唐人街探案3',
            ],
            newMovie:''
        }
    })
    
    </script>
</body>
</html>