【Vue前端】vue使用笔记0基础第1期：Vue基本语法。数据渲染和事件（附代码，已分享）

原创

程序员一诺

修改于 2024-01-03 15:42:13

1150

修改于 2024-01-03 15:42:13

文章被收录于专栏：知识集合知识集合

本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的 web 界面的渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。

全套笔记和代码自取地址：请移步这里

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

共 2 章，10 子模块

Vue概述

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

Vue.js读音 /vjuː/, 类似于 view

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API

Vue.js是一个构建数据驱动的Web界面的库

Vue.js是一套构建用户界面的渐进式框架

通俗的说:

Vue.js是一个构建数据驱动的 web 界面的渐进式框架
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
核心是一个响应的数据绑定系统

vue的作者

尤雨溪是Vue.js框架的作者，他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。

Vue.js使用文档及下载Vue.js

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看：https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下载：https://cn.vuejs.org/v2/guide/installation.html

可视化学习网站:https://scrimba.com/playlist/pXKqta

Vue基本使用

第一个 Vue 应用

文档

导包

官方提供了两个包

开发环境版本
生产环境版本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

</body>
</html>

采用模板语法来声明式地将数据渲染进 DOM 的系统

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>
</body>
</html>

创建VUE实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</html>

data

基本语法

数据绑定最常见的形式就是使用“Mustache(胡子)”语法 (双大括号) 的文本插值

<span>{{ message}}</span>

Mustache 标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生了改变，插值处的内容都会更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span>{{ message }}</span> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</html>

通过chrome浏览器的快捷键ctrl+shift+i或者F12来展示调试工具

我们也可以通过改变Vue的分隔符来修改Mustache 标签

v-bind绑定元素属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span>{{ message }}</span> <br>
   <span v-bind:title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
   <a v-bind:href="home" target="_blank">戳我有惊喜</a>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/'
  }
})
</script>
</html>

v-bind: 简写:

文档

if条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

v-if
v-else-if
v-else
v-show

v-if

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <span>{{ message }}</span> <br>
   <span :title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
   <a :href="home" target="_blank" title="惊喜">戳我有惊喜</a> <br>  
   <p v-if="seen">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/',
    seen:true,
  }
})
</script>
</html>

效果

v-if和v-else

文档

<a href="#" v-if="islogin">个人中心</a>
   <a href="#" v-else>登录</a>

v-else要紧跟 v-if后边

v-if,v-else-if和v-else

文档

<img src="" alt="皇帝" v-if="level === 1">
<img src="" alt="皇亲" v-else-if="level === 2">
<img src="" alt="国戚" v-else-if="level === 3">
<img src="" alt="大臣" v-else>

v-show

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <p v-if="seen" id="if">现在你看到我了</p>
   <p v-show="seen" id="show">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    seen:false
  }
})
</script>
</html>

效果

v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的

注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突

for列表渲染

文档

v-for指令可以绑定数组的数据来渲染一个项目列表

v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
   todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛X项目' }
    ]
  }
})
</script>
</html>

效果

index

<ol>
  <li v-for="(todo,index) in todos">
    {{ todo.text }}-{{index}}
  </li>
</ol>

对象

文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>
</html>

效果

对象列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <ul>
    <li v-for="item in items">
      {{ item.title }}~~~{{item.author}}~~~{{item.publishedAt}}
    </li>
  </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    items: [
       {
        title: 'Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      {
        title: 'python',
        author: 'Ricky',
        publishedAt: '2019-04-10'
      },
      {
        title: 'itcast',
        author: 'itcast',
        publishedAt: '2006-05-08'
      }
    ]
  }
})
</script>
</html>

效果

methods事件

文档

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:0
  }
})
</script>
</html>

效果

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="add">Add 1</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:0
  },
  methods:{
    add:function(){
      counter+=1
      alert(this.counter)
    }
  }
})
</script>
</html>

事件处理方法传递参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="addnum(counter)">Add {{counter}}</button> 
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    counter:1
  },
  methods:{
    addnum:function(num){
      this.counter = num+this.counter
      alert(this.counter)
    }
  }
})
</script>
</html>

v-on: 简写 @

model表单输入绑定(双向绑定数据)

单行文本框
多行文本框
单选框
多选框
下拉框

文档

可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
      <tr><td>用 户 名</td><td><input type="text" v-model="username" @blur="checkusername"> </td></tr>
      <tr><td>密码</td><td><input type="password" v-model="password1"> </td></tr>
      <tr><td>确认密码</td><td><input type="password" v-model="password2"></td></tr>
      <tr><td>性别</td>
        <td>
          男<input type="radio" name="sex"  value="boy" v-model="sex"> 
          女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
        </tr>
      <tr><td>爱好</td>
        <td>
          足球 <input type="checkbox" name="like" value="足球" v-model="like"> 
          篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
          兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like"> 
        </td>
      </tr>
      <tr><td>所在城市</td>
        <td>
          <select name="city" v-model="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
          </select> 
        </td>
      </tr>
      <tr><td>个人简介</td><td><textarea name="desc" v-model="desc"></textarea> </td></tr>
    </table>
    <button @click="register">注册</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      username:'',
      password1:'',
      password2:'',
      sex:'',
      like:[],
      city:'',
      desc:''

  },
  methods:{
    register:function(){

        alert(this.username+this.password1+this.password2+this.sex+this.like+this.city+this.desc)
    },
    checkusername:function(){
      alert(this.username)
    }
  }
})
</script>
</html>

效果

Todolist案例

准备工作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <input type="text"> <button>添加</button>
   <hr/>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
  },
  methods:{

  }
})
</script>
</html>

列表数据渲染

<ul>
     <li v-for="item in items">{{item}}</li>
 </ul>

绑定数据能够添加到列表中

<body>
<div id="app">
   <input type="text" v-model="newitem"> <button @click="addNetItem">添加</button>
   <hr/>
   <ul>
     <li v-for="item in items">{{item}}</li>
   </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      }
  }
})
</script>
</html>

实现删除功能

<div id="app">
   <input type="text" v-model="newitem"> <button @click="addNetItem">添加</button>
   <hr/>
   <ul>
     <li v-for="(item,index) in items">
      <span>{{item}}</span> 
      <a href="javascript:;" @click="deleteItem(index)">删除</a>
     </li>
   </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      },
      deleteItem:function(index){
        this.items.splice(index,1)
      }
  }
})
</script>
</html>

添加移动按钮,实现移动功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <input type="text" v-model="newitem"> <button @click="addNetItem">添加</button>
   <hr/>
   <ul>
     <li v-for="(item,index) in items">
     <a href="javascript:;" @click="upItem(index)">↑</a>
      <span>{{item}}</span> 
      <a href="javascript:;" @click="downItem(index)">↓</a>
      <a href="javascript:;" @click="deleteItem(index)">删除</a>
     </li>
   </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      },
      deleteItem:function(index){
        this.items.splice(index,1);
      },
      upItem:function(index){
          current=this.items[index];
          this.items.splice(index,1);
          this.items.splice(index-1,0,current);
      },
      downItem:function(index){
          current=this.items[index];
          this.items.splice(index,1);
          this.items.splice(index+1,0,current);
      }
  }
})
</script>
</html>

未完待续，同学们请等待下一期

全套笔记和代码自取地址：请移步这里

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

作者已关闭评论

0 条评论

热度