Vue2.5基础

水深无声 2022-01-07 09:31 244阅读 0赞

### ###

**1.1 创建第一个Vue实例**

官方网站：https://cn.vuejs.org

学习 --> 安装

刚开始学习Vue，使用最简单的安装方式，直接用<script>引入

我们下载开发版本的Vue.js

创建一个index.html， 引入Vue.js

使用Vue.js创建一个实例

<!DOCTYPE html>
    　　<html lang="en">
    　　<head>
    　　　　<meta charset="UTF-8">
    　　　　<title>Vue入门</title>
    　　　　<script src="./vue.js"></script>
    　　</head>
    　　<body>
    　　　　<div id="app">{
        {msg}}</div>
    　　　　<script>
    　　　　　　new Vue({
        
    　　　　　　　　el: "#app",  //挂载点
    　　　　　　　　data: {
        
    　　　　　　　　　　msg: "hello world"
    　　　　　　　　}
    　　　　　　})
    　　　　</script>
    　　</body>
    </html>

**1.2 Vue实例中的数据，事件和方法**

v-text指令

v-html指令

绑定事件

<div id="app">
        <div v-on:click="clickFn">{
        {content}}</div>
    </div>
    <script>
    　　new Vue({
        
    　　　　el: "#app",
    　　　　data: {
        
    　　　　　　content: "hello"
    　　　　},
    　　　　methods: {
        
    　　　　　　clickFn: function () {
        
    　　　　　　　　//改变数据
    　　　　　　　　//当数据发生变化的时候，Vue会自动帮你去更新页面
    　　　　　　　　//不需要直接去操作DOM
    　　　　　　　　this.content = "world"
    　　　　　　}
    　　　　}
    　　})
    </script>

v-on:click 可以简写成 @click

<div @click="clickFn">{
        {content}}</div>

现在的编程，不是面向DOM去编程了，而是面向数据去编程了。

当数据发生改变，页面就会自动发生变化了。

想让页面的数据发生变化，并不需要直接的去操作DOM，通过this.xxx="xxx"，去改变实例中的数据就行了。

Vue实例会监听到你数据的改变，自动的帮你对模板进行更新，页面就会自动跟着变化了。

**1.3 Vue中的属性绑定和双向数据绑定**

**我们希望属性title的值可以改变**

<div id="app">
    　　<div v-bind:title="title">hello world</div>
    </div>
    <script>
    　　new Vue({
        
    　　　　el: "#app",
    　　　　data: {
        
    　　　　　　title: "this is title"
    　　　　}
    　　})
    </script>

v-bind:title 的意思是，我当前title这个属性，和Vue实例中的title这个数据项进行绑定。

那么经过这样写之后，v-bind:title = "title"， 双引号中的title就不再是字符串了，而是表达式了， 双引号中的title是一个变量。

v-bind: 可以缩写成 :

<div :title="title">hello world</div>

v-bind:title  和 :title 意思是一样的。

**双向数据绑定**

**什么是单向绑定？**

**答：数据决定页面的显示，但是页面无法决定你数据里面的内容。**

**使用v-model指令，来进行双向数据绑定，可以在页面中改变数据。**

<div id="app">
    　　<input v-model="content" />
    　　<div>{
        {content}}</div>
    </div>
    <script>
    　　new Vue({
        
    　　　　el: "#app",
    　　　　data: {
        
    　　　　　　title: "this is title",
    　　　　　　content: "this is content"
    　　　　}
    　　})
    </script>

**1.4 Vue中的计算属性和侦听器**

转载于:https://www.cnblogs.com/still1/p/10733654.html