Vue.js开发基础

vue.js基本使用

1.导入vue.js。
2.准备好界面。
3.实例化一个vue，并且将这个界面交给vue管理。
4.{{ vue里的变量 }}，可以输出这个变量的值。

效果：

How are you? I am fine.Thank you.And you?

小结】
el属性：找到某个盒子，并把他交给vue管理。
data属性：vue里放数据的地方。

插值语法(胡子语法)

功能：

  用于解析标签体内容

写法：

  {{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

效果：

8 ，18 ，true , 成年

指令语法 ——v-text、v-html指令

功能：

 用于解析标签（包括：标签属性、标签体内容、绑定事件…）

【v-text与v-html】
·v-text相当于原生的innerText
·v-html类似于原生的innerHTML

·语法：

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

作用：

  v-text:向其所在的节点中渲染文本内容
  v-html:向指定节点中渲染包含html结构的内容

效果：

指令语法 ——v-model指令

该指令一般是给表单元素使用的。

（输入框、密码框、单选框、文本框、下拉框…)

作用：

  可以获取表单元素的值，
  也可以设置表单元素的值。
  双向数据绑定

语法：

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