Vue基本语法和组件

						Vue基本语法和组件

Vue基本语法
可以使用V-bind来绑定元素 v-bind等被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性。他们在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message 属性保持一致”。
如果你再次打开浏览器的JavaScript控制台，输入app。Message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新
什么是双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也发生变化，当视图发生变化的时候，数据也会跟着同步变化，这就是vue.js的精髓之处。
在表单中使用双向数据绑定
可以用v-model指令在表单、或元素上创建双向数据绑定。他会根据控件类型自动选取正确的方法来更新元素，v-model本质上不过是语法糖。它负责监听用户输入事件以跟新数据。注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明初始值
Vue常用7个属性
①、el属性：用来指示vue编译器从什么地方开始解析vue语法，可以说是一个占位符。
②、data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
③、template属性：用来设置模板，会替换页面元素，包括占位符
④、methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中
⑤、render属性：创建真正的Virtual Dom
⑥、computed属性：用来计算
⑦、watch属性：（1）、watch：function（new，old）{} （2）、监听data中数据的变化 （3）、两个参数，一个返回新值，一个返回旧值
Vue组件
注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发
什么是组件
组件是可复用的vue实例，说白了就是一组重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树形式来组织：

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发。
使用Vue.component()方法注册组件，格式如下：

说明：
Vue.component（）：注册组件
my-component-li:自定义组件的名字
template:组件的模板
使用props属性传递参数
我们只需要传递参数到组件的，此时就需要使用props属性 ！！注意：默认规则下props属性里的值不能为大写

说明：
（1）、v-for=“item in items”：遍历Vue实例中定义的名为items数组，并创建同等数量的组件
（2）、v-bind:jack=“item”：将遍历的item项绑定到组件中props定义的名为item属性上；=号左边的item为props定义的属性名，右边的为item in items 中遍历的item项的值