Vue简介及模板语法

Vue

Vue是一套基于MVVM模式的用于构建用户界面的JavaScript框架,它是以数据驱动和组件化的思想构建的。它是渐进式的JavaScript框架,所谓渐进式,就是把框架进行分层设计,每层都是可选的,不同层可以灵活地替换为其他的方案。

Vue渐进式框架分层结构由外到里分别是构建系统、状态管理、前端路由、组件系统、声明式渲染。

假如你的系统比较简单,更多的是需要访问界面中的DOM节点,以获取用户输入数据或将更新后的数据渲染到视图中,那么可以将Vue作为一个JavaScript库来使用,使用它的声明式渲染机制可以轻松操作DOM,实现数据变化时的自动视图渲染。如果前端页面比较复杂,那么可以考虑将界面元素组件化,利用Vue的组件系统将界面元素与业务逻辑包装为一个个组件,采用分而治之的思想。如果要求前后端分离,将前端做成单页应用程序,那么可以引入前端路由Vue Router,实现单页应用。如果前端应用中有很多数据需要在多个组件间共享,如用户数据,那么可以引入Vuex统一对状态进行管理。Vue提供的构建系统可以轻松地搭建一个脚手架项目。项目内置了运行环境,便于开发、调试并观察程序的运行结果;此外,项目也集成了Webpack打包工具,可以很容易地构建发布版本。

安装Vue.js

有四种方式:

  • 使用CDN
  • 使用npm
  • 使用Vue CLI
  • 使用Vite

推荐使用CDN:

<script src="https://unpkg.com/vue@next"></script>

安装VSCode。

​ 安装Vetur插件,该插件支持.vue文件的语法高亮显示。

​ 安装ESLint插件,它是一个JavaScript语法规则和代码风格的检查工具。

​ 安装Code Runner插件,它使我们在VSCode中以一种快捷方式运行各类代码。鼠标右键选择Run Code运行即可。

安装vue-devtools。

https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv
下载完成后,将压缩包进行解压,打开google浏览器,点击右上角的三个点,选择“更多工具”=》扩展程序,启动开发者模式,选择加载已解压的扩展程序,然后选择从解压包.

Vue.js模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式地将呈现的DOM绑定至底层组件实例的数据。所有的Vue.js模板都是有效的HTML。在底层,Vue将模板编译为虚拟DOM呈现函数,结合响应式系统,当应用程序状态发生变化时,Vue可以智能的计算出需要重新渲染和应用最小数量DOM操作的组件。

syntax.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js的模板语法</title>
  </head>
  <body>
    <div id="app">
     <!-- 简单的文本插值 -->
     <p>{{message}}</p>
     <!-- 使用JavaScript表达式 -->
     <p>{{ message.toUpperCase() }}</p>
     <!-- HTML代码将以普通文本的方式插入 -->
     <p>{{spanHtml}}</p>
     <!-- 输出HTML代码 -->
     <span v-html="spanHtml"></span>
     <!-- 使用v-bind指令对HTML元素的属性进行绑定 -->
     <a v-bind:href='url'>新浪网</a>
    </div>
      
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const App = {
        data(){
          return {
            message: 'Hello Vue.js',
            url: 'http://www.sina.com.cn',
            spanHtml: '<span style="color: red">HTML元素,以红色字体显示</span>',
          }
        }
      };
      const app = Vue.createApp(App);
      const vm = app.mount('#app');
    </script>
  </body>
</html>

应用程序实例

在一个Vue.js框架的页面应用程序中,需要创建一个应用程序实例,如上面的第32行,这个实例将提供应用程序上下文,应用程序实例装载的整个组件树将共享相同的上下文。Vue3引入createApp是为了解决Vue2全局配置带来的一些问题。createApp是全局API,它接受一个根组件选项对象作为参数,该对象可以包含数据、方法、组件生命周期钩子等,然后返回应用程序实例自身。

在组件选项对象中的data选项是一个函数,Vue在创建组件实例时会调用该函数。data函数返回一个数据对象,Vue会将这个对象包装到它的响应式系统中,即转换为一个代理对象,此代理使Vue能够在访问或修改属性时执行依赖项跟踪和更改通知,从而自动重新渲染DOM。数据对象的每个属性都被视为一个依赖项。

创建了应用程序实例之后可以调用实例的mount()方法,指定一个DOM元素,在该DOM元素上装载应用程序实例的根组件,这样这个元素中的所有数据变化都会被Vue监控,从而实现数据双向绑定。

插值

数据绑定最常见的形式就是使用双花括号的文本插值。花括号里面会被替换为来自相应组件实例的属性的值。在Chrome浏览器打开上面的页面进到开发者模式切换到Console窗口,输入vm.message = 'welcome you'回车,可以看到页面内容也更新了。

Vue在创建组件实例时会把data()函数返回的数据对象保存到组件实例的$data属性中,同时为了方便访问,数据对象的任何顶层属性也直接通过组件实例公开。也就是说,要访问message数据属性,vm.$data.message和vm.message是等价的。

如果绑定的数据包含了HTML代码,会以普通文本输出。要加v-html指令才能正常解析。

花括号语法不能作用于HTML元素的属性上,要使用v-bind指令绑定属性。如上面的v-bind指令将url属性和a元素的href属性进行了绑定。

除了简单的绑定,在花括号里还支持JavaScript表达式。比如:

{{a+b}}
{{isLogin?username : 'not login'}}
{{ message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id"> </div>

这些表达式会在当前活动实例的数据范围内作为JavaScript进行计算。需要注意的是,每个绑定都只能包含单个表达式。

指令

指令是带有v-前缀的特殊属性,其值限定为单个表达式。指令的作用是,当表达式的值发生改变时,将这个变化反映到DOM上。例如,下面的v-if指令将根据表达式show的值的真假来决定是插入还是删除p元素。

<p v-if='show'>
    hhh
</p>

此外,一些指令还可以带有参数,在指令名称之后以冒号表示,如v-bind、v-on。

<a v-bind:href='url'>新浪网</a>
<!--简写语法-->
<a :href='url'>新浪网</a>

<button v-on:click='sayGreet'>Greet</button>
<!--简写语法-->
<button @click='sayGreet'>Greet</button>

v-bind用于响应式地更新HTML属性;v-on用于监听DOM事件。

从Vue2.6版本开始,指令的参数可以是动态参数,语法为指令 :[JavaScript表达式]。

<a v-bind:[attribute]='url'>新浪网</a>

这里的attribute会被作为一个JavaScript表达式进行动态求值,求得的值将作为最终的参数使用,假设组件实例中有一个数据对象属性为attribute,其值为href,那么这个绑定将等价于v-bind:href。如果attribute的值计算为null,这个绑定将被删除,为<a>新浪网</a>。

在DOM中使用模板时(直接在一个HTML文件里编写模板),还需要避免使用大写字符命名动态参数,这是因为浏览器会把元素的属性名转换为小写字符。比如下面的DynamicParameter.html文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue.js</title>
    </head>
    <body>
        <!--View-->
        <div id="app">
            <a v-bind:[attributeName]="url">新浪网</a>
        </div>
    
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            var vm = Vue.createApp({
                  data(){
                    return{
                      attributeName: "href",
                      url: "http://www.sina.com.cn/"  
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>

浏览器在加载该页面时会将v-bind:[attributeName]转换为v-bind:[attributename],之后Vue在解析动态参数时会找不到attributename属性。

使用动态参数时不要使用复杂的表达式。因为HTML元素的属性名是有规范的,比如名称中不能有空格或引号。

posted @ 2021-08-11 22:00  KKKyrie  阅读(74)  评论(0编辑  收藏  举报