vue.js开发基础（一）

vue.js使用流程

1.导入 vue.js

  <!-- 导入vue.js -->
  <script src="./vue.js"></script>

2.准备好界面（容器）

    <!-- {{}}就是在输出某个变量的值 -->
    <div id="A">
        <p>{{ msg }}</p>
    </div>

3.实例化一个对象

// 实例化一个vue
        new Vue({
            // 找到某个盒子，并把这个盒子里的内容交给vue来管理
            // 它可以传入任何选择器，但是一般只用id选择器
            // el:''
            el: '#A',
            // 可以理解为在下面声明的都是vue里的变量
            data: {
                msg: '非主流'
            }
        })

• Vue.js遵循MVVM模式，因此使用Vue.js的核心工作就是创建一个“视图模型（ViewModel）”对象，作为视图层和模型层的桥梁。
• Vue.js的做法就是提供Vue类型，开发者可通过创建一个Vue类型的实例来实现视图模型的定义。（即创建Vue实例）
• 通常一个应用中只能有一个唯一处于最上层的Vue实例，这个Vue实例就称为“Vue根实例”。（一般称之Vue实例即可）
• 在这个实例对象中，可以设定很多选项（el、data），这些选项指定了这个对象的行为，即它与页面如何配合工作。

插值语法

语法：{{ 表达式 }}

表达式：变量名。

    或任意表达式；算数表达式，比较表达式，逻辑表达式，三元表达式...

作用：输出表达式的结果 注意：不能写语句

      （分支语句、循环语句）

补充：插值语法，也被叫做胡子语法。

 插入HTML片段/v-text、v-html

• v-text相当于原生的innerText
• v-html类似于原生的innerHTML ·语法：

<标签 v-text=“数据”></标签>

 <标签 v-html=“数据”></标签>

特点：

会把数据内容放到双标签里展示,，但是v-text遇到标签不会解析，只是当纯文本，v-html遇到标签会解析，他们都会覆盖标签内原有的内容。

Eg：

什么是v-model指令 ？

这个指令一般是给表单元素使用的。  （输入框、密码框、单选框、文本框、下拉框...)

作用：可以获取表单元素的值， 也可以设置表单元素的值。

语法：<表单元素 v-model=“变量”></表单元素>

补充：交互，双向奔赴❥

Eg: