An article to talk about instructions and interpolation in vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（学习视频分享：vue视频教程）

一、安装vue

直接使用script标签引入

Copy after login

二、Vue模板案例

步骤

1、引入vue框架
2、定义1个盒子（根节点）
3、定义1个script标签

3.1、定义js对象（根组件）
3.2、通过vue创建1个应用
3.3、将应用挂载到根节点（第二步中创建的盒子）

data()：存放页面中显示数据的地方

Copy after login

三、基础模板（记住）

Copy after login

四、vue的指令和插值

1、{ {}}：插值表达式的语法

{ {}}：可以在html中引用data中定义的数据

`{{name}}`

2、v-text：填充纯文本内容（data中的值）

效果和innerText一样

3、v-html：填充html（data中的值）

效果和innerHtml一样

4、v-pre：填充原始数据

防止vue对标签进行渲染（标签中写的什么，就显示什么）

显示两个花括号，中间为js：{{}}

         
         
         
          
           
          
         
         
          
           
          
         
         
          {{name}}
          {{age}}
          {{sex}}
          info中的a1:{info.a1}
          info中的a2:{info.a2}
          

          
 显示两个花括号，中间为js：{{}}

Copy after login

效果展示：

An article to talk about instructions and interpolation in vue

5、v-bind：属性绑定

语法：
v-bind:属性=‘值’
简写 :属性=‘值’

{{aInfo.title}}
简写
{{aInfo.title}}

         
         
         
          
           
          
         
         
          
           
          
         
         
          {{aInfo.title}}
          
          {{aInfo.title}}

Copy after login

样式绑定

Copy after login

6、v-on：事件绑定

语法：v-on：事件名称=‘执行的方法’
简写
@事件名=‘执行的方法’

简写

7、v-show：控制元素显示和隐藏的指令

控制元素显示隐藏的指令：
v-show 值为True则显示，值为false为隐藏

py

methods：定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

例如

switchShow()
定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

py

Copy after login

8、v-model：数据的双向绑定

双向绑定只用于表单和组件
页面修改数据会变，数据改变，页面也会改

Copy after login

9、v-if、v-else-if、v-else：条件渲染

通过条件来控制元素是否渲染到页面

v-if
v-else-if
v-else

Copy after login

10、v-for：遍历对象、数组

案例：根据不同的结果，展示不同文字颜色

         
         
         
          
           
          
         
         
          
           
          
         
         
          
           
           
            
             id
             title
             result
             操作
            
            
            
             {{item.id}}
             {{item.title}}
             
             {{item.result}}
             {{item.result}}
             {{item.result}}
             {{item.result}}

id	title	result	操作
{{item.id}}	{{item.title}}	{{item.result}}	{{item.result}}	{{item.result}}	{{item.result}}

Copy after login

An article to talk about instructions and interpolation in vue

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of An article to talk about instructions and interpolation in vue. For more information, please follow other related articles on the PHP Chinese website!