vue基础知识 vue使用的基本框架 vue指令 （v-html、v-text、v-pre、v-bind、v-on）、v-modle指令、v-if与v-show指令、v-for指令 tolist示例

一、vue的基本语法

1.vue包的引入

在cmd 命令行输入npm i vue下载vue包

在html在vue包中的路径下node_modules\vue\dist引入vue.global.js

2.vue使用的基本框架

<div id="app">
        <h1>{
  {message}}</h1>
        <h2>{
  {title}}</h2>
</div>
<!-- 引入vue包 -->
    <script src="./lib/vue.global.js"></script>
    <script>
      // 创建一个vue实例对象
        const { createApp } = Vue
        createApp({
         // data选项 定义数据
            // data定义为函数形式:保证一个vue实例对应一个实例对象
            data() {
                return {
                    message:'学习',
                    title:"study"
                }
            },
            methods: {

            },

        }).mount("#app")//mount 方法让vue实例与html关联
    </script>

3.vue对html的基本操作

1. 操作html元素

• v-特殊属性称为指令
• { {变量}}   模板插值

  <p>{ {title}}</p>

• v-html指令     v-html="变量"   浏览器解析代码

 <p v-html="conent"></p>

  text2:'<h2>操作元素样式</h2>',

  

• v-text指令    v-text="变量"   直接显示代码

 <p v-text="text1"></p>

text3:'<h2>操作属性</h2>'

 

 

• v-pre指令   

   <p v-pre>{ {内容}}</p> 直接显示花括号的内容  不会解析{ {内容}}

 <p v-pre>{ {message}}</p>

 

 

完整代码 

   <div id="app">
        <p>{
  {title}}</p>
        <p v-html="conent"></p>
        <p v-text="text1"></p>
        <p v-html="text2"></p>
        <p v-text="text3"></p>
        <p