Vue (二) --------- Vue.js 基础语法

目录

  • 一、第一个 Vue.js 案例
  • 二、解析 MVVM
  • 三、指令属性的基本使用
    • 1. v-cloak
    • 2. v-text 与 v-html
    • 3. v-bind
  • 四、使用v-on 指令触发事件
    • 1. 基本使用
    • 2. 事件修饰符的使用
      • ① .stop
      • ② .prevent
      • ③ .capture
      • ④ .self
      • ⑤ .once
  • 五、使用 v-model 指令实现双向数据绑定
  • 六、使用 class 样式
  • 七、v-for 指令和 v-if 指令的应用


一、第一个 Vue.js 案例

初识:

1.想让Vue工作,就必须创建一个 Vue 实例,且要传入一个配置对象。

2.容器里的代码依然符合 html 规范,只不过混入了一些特殊的 Vue 语法。

3.容器里的代码被称为 Vue 模板;

4.Vue 实例和容器是一一对应的;

5.真实开发中只有一个 Vue 实例,并且会配合着组件一起使用;

6.一旦 data 中的数据发生改变,那么页面中用到该数据的地方也会自动更新;

在写第一个案例之前,我们先把 vue 运行环境引入到 lib 中

还需要介绍一个知识点 : 插值表达式

插值表达式

语法 : {{值}}

在html标签中使用插值表达式 {{值}}通过此方式可将 data 中的属性值以文本的形式显示在前端,插值表达式的前后都可以插入文本或者其他内容,在网页渲染时不会被覆盖,类似于占位符,同时它还有闪烁的问题需要配合 v-cloak 属性解决。

插值表达式是 Vue 模板语法的其一,另一类为指令语法,我们在下面会有详细介绍。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script src="./lib/vue-2.4.0.js">script>
head>
<body>
     
    <div id="app">
        
        
        <p>{{str1}}p>
        <p>{{str2}}p>
    div>

    <script>
        // 当 Vue.js 框架包导入进来之后, 在浏览器缓存中, 就已经存在了一个 Vue 框架的构造函数
        // 我们 new 出来的这个 vm 对象, 就是对页面中对于模型和视图(数据和页面元素)的整体调度者
        var vm = new Vue({
            el : "#app", // el 元素表现的是要指定为哪个标签进行相应的 vue.js 操作
            data : { // data 是 vue.js 中对于数据的表达, 数据约定俗成的都是以 json 的形式来呈现的
                "str1" : "HelloWorld1",
                "str2" : "HelloWorld2"
            }
        });
    script>
body>
html>

Vue (二) --------- Vue.js 基础语法_第1张图片
el 用于指定当前Vue实例为哪个容器服务,值通常为 css 选择器字符串,其有两种写法 ① new Vue 时候配置 el 属性 ② 先创建 Vue 实例,随后再通过vm.$mount(‘#app’)指定 el 的值

data 中用于存储数据,数据供 el 所指定的容器去使用,其也是有两种写法 ① 对象式 (示例中写法) ② 函数式

data() {
	return{
		str1:'hello world'
	}
}

注 : 可以在

你可能感兴趣的:(Vue,vue.js,前端,javascript)