vue指令--day01

最新推荐文章于 2023-06-02 00:10:47 发布

Fiee Dust Heart

最新推荐文章于 2023-06-02 00:10:47 发布

阅读量292

点赞数

分类专栏： vue 文章标签： vue js html css

本文链接：https://blog.csdn.net/qq_45062586/article/details/105166923

版权

个人blog-1：拾忆生活
个人blog-2：极简-拾忆生活
欢迎大家来踩，同步更新

day1

vscode

使用 snippets 为 .vue 生成模板

ctrl + shift + p
输入 snippets 后，选择首选项：配置用户代码片段
输入vue 后点击 vue.json后就可以在里面输入模板

当我们新建.vue文件后

输入vue后按tab键，就能够生成一套我们在vue.json里定义的模板

1.基本语法

MVVM是前端视图层的概念，主要关注于视图层分离，三部分 Model, View , VM （ViewModel）

m model
- 数据层放在 data 里
v view 视图
- HTML页面
vm view-model
- 控制器，将数据和视图层建立联系：Vue 的实例

指令

本质就是自定义属性
Vue中指定都是以 v- 开头

一、el挂载点选择器

id选择器
el:"#app",
class选择器
el:".app",
标签选择器
el:"div",

二、数据定义在data中

$\color{red}在函数中要使用data里面的数据一定要加this$

Vue 中只有在标签的内容中才用插值语法

$\color{red}对象{}的'.'语法$
- { { school.name }}
- { { school.mobile }
$\color{red}数组的[]索引语法$
- { { campus[0] }}
- { { campus[1] }}

<div id="app">
        <!-- 在指令中写差值语法无效 -->
        {
  { message }}
        <!-- 只有在标签的 内容中 才用插值语法 -->
        <p>{
  {message}}</p>
        <h2> {
  { school.name }} {
  { school.mobile }}</h2>
        <ul>
            <li>{
  { campus[0] }}</li>
            <li>{
  { campus[1] }}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
    
            //id选择器
            el:"#app",
            //class选择器
            // el:".app",
            // //标签选择器
            // el:"div",
            data:{
    
                message:"你好 小黑!",
                school:{
    
                    name:"张三",
                    mobile:"123"
                },
                campus:["北京","上海"]
            }
        })
    </script>

2.vue指令

一.v-text、v.html、v-pre、v-once、v-cloak

注意：（单向绑定）
- 数据对象上的值改变，插值会发生变化
- 当插值发生变化并不会影响数据对象的值

v-text单向绑定 $\color{red}$

1.设置标签的文本值

v-text = data的属性名
v-text=“message”

2.拼接文本(在最前面接上)

v-text = data的属性名+插值表达式
v-text=“message+’!’”

3.v-text指令用于将数据填充到标签中，作用于插值表达式类似

没有闪动问题
$\color{red}如果有HTML标签不会转换输出，输出的是纯文本$

v.html单向绑定

1.设置标签的innerHTML

可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

2. $\color{red}将其当html标签解析后输出$

v-pre单向绑定

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

v-once单向绑定

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
v-once的应用场景：如果显示的信息后续不需要再修改，可以提高性能。
可以在浏览器中输入
- app.msg=123来测试

v-model双向数据绑定

注意：双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
限制在 <input>、<select>、<textarea>、components中使用
$\color{red}mvvm设计思想中的vm$

 <div id="app">
      <div>{
  {msg}}</div>
      <div>
          当输入框中内容改变的时候，  页面上的msg  会自动更新
        <input type="text" v-model='msg'>
      </div>
  </div>

    <div id="app">
        <h2 v-text="message+'!'">aaa</h2>
        <h2 v-text="info+'!'">aaa</h2>
        <h2>{
  { message +'!'}}aaa</h2>

        <p v-text="content"></p>
        <p v-html="content"></p>
        <!-- 显示 {
   {msg}}不转换-->
        <p v-pre>{
  {msg}}</p>  
        <!-- 后期我们修改了值，仍然显示的是第一次data里面存储的数据即 Hello Vue.js -->
        <p v-once>{
  {msg}}</p>
        <!-- 后期我们修改了值，不变化 -->
        <p >{
  {msg}}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
    
            el:"#app",
            data:{
    
                msg: 'Hello Vue.js',
                message:"vue",
                content:"<a href='https:/www.baidu.com'>百度<a>"
            }
        })
    </script>

v-cloak

防止页面加载时出现闪烁问题

1、通过属性选择器选择到带有属性 v-cloak的标签让他隐藏
- 元素隐藏：display: none;
2、让带有插值语法的添加 v-cloak 属性
- <div v-cloak >{ {msg}}</div>
在数据渲染完场之后，v-cloak 属性会被自动去除
- v-cloak一旦移除就没有这个属性
- 属性选择器就选择不到该标签，即对应的标签会变为 $\color{red}可见$

<style type="text/css">
    [v-cloak]{
    
      display: none;
    }
</style>
<body>
    <div id="app">
      <div  v-cloak  >{
  {msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
    
        el: '#app',
        data: {
    
          msg: 'Hello Vue'
        }
      });
  </script>
</body>

二、v-on

1.为元素绑定事件

v-on:click=“xxx”
- 点击事件
v-on:dblclick=“xxx”
- 双击事件
v-on:contextmenu.prevent=“xxx”
@contextmenu.prevent=“xxx”
@click.right=“xxx”
- 鼠标右击事件
v-on:mouseenter=“xxx”
- 鼠标进入事件
v-on:mouseleave=“xxx”
- 鼠标进入事件
v-on:mousemove=“xxx”
- 鼠标移动事件

$\color{red}参数是methods中的function函数1$
xxx : function(){…}
注意：函数名字命名，必须有大写，驼峰规则

最低0.47元/天解锁文章

Fiee Dust Heart

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue指令--day01

day1vscode使用 snippets 为 .vue 生成模板ctrl + shift + p输入 snippets 后，选择首选项：配置用户代码片段输入vue 后点击 vue.json后就可以在里面输入模板当我们新建.vue文件后输入vue后按tab键，就能够生成一套我们在vue.json里定义的模板1.基本语法MVVM是前端视图层的概念，主要关注于视图层分离，三部...
复制链接

扫一扫