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

举报
程序员一诺112 发表于 2024/01/02 21:47:53 2024/01/02
【摘要】 本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的 web 界面的渐进式框架，Vue.js 的目标是通过尽可能简单的

本系列文章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>




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


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

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Vue 渲染 网站
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入