Vue框架的基本使用

Vue框架的基本使用

  • Vue的使用步骤
  • 代码示例
    • 实例参数分析
    • 插值表达式的用法
  • Vue代码运行原理分析

Vue的使用步骤

  • 1.创建一个标签,用于数据的填充
  • 2.引入Vue.js库文件
  • 3.实例化Vue对象
  • 4.把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">
        <div>{
    { msg }}div>
        <div>{
    { 1 + 1}}div>
        <div>{
    {"===" + msg + "==="}}div>
    div>
    <script src="js/vue-2.5.16.js">script>
    <script type='text/javascript'>
        var vm = new Vue({
      
            el: '#app', // 元素的挂载位置(值可以是CSS选择器或者DOM元素)
            // data 模型数据(值是一个对象)
            data: {
      
                msg: 'Hello Vue',
            }
        });
    script>
body>

html>

实例参数分析

  • Vue对象里
    • el为元素的挂载位置(值可以是CSS选择器也可以是DOM元素)
    • data为模型数据(类型是一个对象)

插值表达式的用法

  • 使用插值表达式{ {}}将数据填充到HTML标签里
  • 插值表达式还支持JavaScript的基本计算操作

Vue代码运行原理分析

概述编译过程概念(Vue语法→原生js语法)
Vue框架的基本使用_第1张图片

你可能感兴趣的:(Vue框架学习,vue,js,javascript,html,vue.js)