初识vue

最新推荐文章于 2024-02-03 14:49:17 发布

李码王

最新推荐文章于 2024-02-03 14:49:17 发布

阅读量91

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_50220069/article/details/109578634

版权

vue基础

什么是vue

官网：https://cn.vuejs.org/
是 MVVM js 渐进式视图层框架

mvvm
  m model 数据 
  v view 视图
  mv vm  数据改变 视图会自动刷新（vm Vue实例驱动刷新）

  命令式
    将程序 每一个 运行步骤  写出来 程序运行
  声明式
    告诉 计算机 我要干什么 （中间怎么做 不管）
一切以数据为核心、尽量不要操作dom(由数据驱动视图)

渐进式
  vue.js 核心库 只有 核心语法 
  vue还有很多其他的功能，是以插件的形式 灌入 Vue构造函数上

视图 构建用户界面

vue雏形

const vm = new Vue({
  el: '#app', // 挂载vue #app 内部会被vm控制
  data: { 
    // 存放 当前实例中的data data中的 属性会直接挂载到 vm（实例）上，不是 vm.data.xxx
    msg: 123
  },
  methods: {
    // 存放实例 上的方法 methods中的方法，也会直接挂载到实例上
  }
})

模板 {{ }}

用于渲染实例 vm 上的数据的在模板中可以直接写实例上的属性和方法
注意：
1，模板是用于渲染数据不管是属性还是方法，最终需要有一个值
2，{{}}模板内部是js语法、模板js环境只能识别实例上的属性和方法
大部分原生js 全局方法或者属性是不识别（但是设置了一个白名单、白名单范围内的全局属性和方法可以使用）

'Infinity,undefined,NaN,isFinite,isNaN,' +
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
'require'

3，{{}} 可是直接写表达式和计算切记只能是表达式


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ msg }}
    {{ "a" }}
    {{ 1+2*5+9-10 }}
    {{ isLike?'喜欢你':'讨厌你'  }}
    <!-- {{ alert(1) }} -->
    {{ parseInt('1.345') }}
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg:123,
        isLike: false
      },
      methods:{
      
      }
    })
  </script>
</body>
</html>

外部挂载vue

const vm = new Vue({
  data:{},
  methods:{}
}) 
vm.$mount(document.querySelector("#app"))

指令

扩展了标签属性的功能

用法：<组件 v-指令名=“值”/>
组件：包括html标签

常见指令

v-model  *****
      将表单的值 和 实例的 数据 进行双向绑定
      注意：是input事件
v-text 不重要
      将 vue 数据 和 元素的 文本内容进行绑定
v-html  渲染富文本数据
总结：
  <组件 v-指令名="值"/>
  值 如果是变量 只会去找 vm实例上的属性
  值 是js环境 可以写表达式 不可以写 if。。。
  值得语法 同{{}}模板